我的 header 图片没有响应

Question

我正在为我的网页设计课程制作一个网站，其中一个标准是它具有响应性（调整内容大小以适应屏幕大小）。因此，在我的网站中，每个图像和文本段落的大小都根据从全高清到 iPhone 大小的屏幕大小而定。除了我的 header 图像，当我缩小它时，它只是保持锁定在它的位置，所以当它降低到移动分辨率时，我必须向右滚动才能看到我的图像。

这是我的 HTML 和 CSS 代码 header 图片：

HTML:

<div class="container_14">
   <div class="grid_12">
      <a href="index.html">
         <p align="center"><img src="images/logo2.png"></p>
      </a>
   </div>
</div>

CSS:

.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}

.container_14 .grid_12 {
width:97.5%;
height:90px;
}

img {
max-width: 100%;
}

Link 到我的代码中随机使用相同大小的图像.. http://jsfiddle.net/hac4cfrn/

Answer 1

如果您希望它具有响应性和居中性，您应该将 .container_14 设置为 100%，而不是以像素为单位对其进行硬编码：

.container_14 {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}

<div class="container_14">
   <div class="grid_12">
      <a href="index.html">
         <p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
      </a>
   </div>
</div>

Answer 2

如果你想让.container_14适配各种屏幕但停留在1200pxwidth如果有足够的space，那么使用@media查询:

.container_14 {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
}

@media screen and (max-width:1200px){
  .container_14 {
    width: 100%;
  }
}

.container_14 .grid_12 {
  width:97.5%;
  height:90px;
}

img {
  max-width: 100%;
}

<header>

<div class="container_14">
    <div class="grid_12">
          <a href="index.html">
             <p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
          </a>
    </div>
    </div> 
    
</header>

您还可以为里面的图像添加第二个 @media 查询。不用容器也是可以的。

否则，您可以将 100% 用作 width。

我的 header 图片没有响应

My header image isn't responsive

html

css

responsive-design