Question

我的网站上有图像（现在，我使用高度和宽度给出一个像素数）但我注意到的是，当我拉伸浏览器时，我的图像往往会完全混乱。

所以我需要一些帮助使它们静止，所以如果用户伸展他们的浏览器，图片将保持在他们的位置而不会被移动。此时，我的谷歌浏览器浏览器必须拉伸一定量，以使所有图片内联对齐。但是一旦我伸展它，图片就会开始移动。我想要一些保持图片静止的方法。

如果有人可以帮助我，我们将非常感谢！任何意见/建议真的很好！我一直在努力解决这个问题。谢谢！这是我的HTML：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class = "scrolling">
    <div class = "quick-info"> <!--Start quick-info-->
       <div class="image"> <!--Start1-->
         <img src="http://d39ya49a1fwv14.cloudfront.net/wp- content/uploads/2013/07/0x600.jpg" height="340" width="250"/>
       </div>
       <div class="image"> <!--Start2-->
         <img src="http://gstylemag.com/wp-content/uploads/2014/05/Lebron-James-2.jpg" height="340" width="257"/>
       </div>
       <div class="image"> <!--Start3-->
         <img src="http://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg" height="340" width="257"/>
       </div> <!--End3-->
       <div class="image"> <!--Start4-->
         <img src="http://www.zooatlanta.org/media/image/panda_cubs2013_140402_meilun_meihuan_ZA_0769_600.jpg" height="340" width="257"/>
         </div> <!--End4-->
         <div class="image"> <!--Start5-->
          <img src="http://www.soflasun.com/wp-content/uploads/2014/12/dog8.jpg" height="340" width="259"/>
         </div> <!--End5-->
      </div> <!--End of quick-info-->
  </div>
  </body>
  </html>

CSS：

.quick-info {
  background-color:#659CEF;
  height: 350px;
  font-family: Garamond;
  font-size: 16px;
}
.image {
  display: inline;
  padding: 0px;
  margin: 0px;
  float: left;
  border: 0px;
}
#text {
  position: absolute;
  top: 270px;
  width: 257px;
  height: 85px;
}

Answer 1

如果增加浏览器窗口的宽度，如果有足够的空间（取决于您的定位），元素可能会放在彼此相同的行上。尝试更改

的值

位置：

在样式表中。

另外，我建议您查看响应式框架，例如bootstrap或foundation

HTML图像更改位置

1 个答案: