我的网站上有图片(目前，我使用高度和宽度给出以像素为单位的数字)但我注意到，当我拉伸(stretch)浏览器时，我的图片往往会变得一团糟。
所以我需要一点帮助使它们保持静态，这样如果用户拉伸(stretch)浏览器，图片将保持在原位而不会四处移动。此时，我的 google chrome 浏览器必须拉伸(stretch)一定量才能使所有图片内嵌对齐。但是一旦我拉伸(stretch)它，图片就会开始移动。我想要一些保持图片静态的方法。
如果有人能帮我解决这个问题，我将不胜感激!任何意见/建议真的很好!我已经为此苦苦挣扎了一段时间。 谢谢! 这是我的 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;
}
最佳答案
如果您增加浏览器窗口的宽度，如果有足够的空间(取决于您的定位)，元素可能会彼此放置在同一行上。尝试改变
的值position:
在你的样式表中。
此外，我建议您了解一下响应式框架，例如 bootstrap 或 foundation
关于HTML 图像改变位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28792065/