Question

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

这是标题图片的HTML和CSS代码：

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%;
}

使用随机相同尺寸的图片链接到我的代码.. 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适应各种屏幕，但如果空间足够，请留在1200px width，然后使用@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。

我的标题图片没有响应

2 个答案: