文章/答案/技术大牛

发布

问HTML:图片漂浮在左边？
EN

Stack Overflow用户

提问于 2012-05-11 16:05:41

回答 4查看 157关注 0票数 1

我想做一个有很多图片的页面。

<style>
img{margin-bottom: 3px; float: left}
</style>

<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">

如果它们都有相同的宽度和高度，它看起来很好。但是，当其中一个尺寸更大时会发生什么呢？它打乱了所有的布局，显示了一个让它看起来很难看的空白。

如何解决这个问题？

html

css

layout

image-resizing

回答 4

Stack Overflow用户

发布于 2012-05-11 16:09:24

为什么你不把width: 150px或者任何你想要的大小放在css里面呢？

<style>
img{margin-bottom: 3px; width: 150px; float: left}
</style>

票数 1

Stack Overflow用户

发布于 2012-05-11 16:10:39

使用一点javascript，你就可以把它们都变成相同的大小。但看起来也好不到哪里去。也许相同的宽度和简单的重复背景可能会是一个折衷方案。

票数 1

Stack Overflow用户

发布于 2012-05-11 16:33:30

如果没有必要显示整个图像，可以考虑将图像放在div标记中，作为背景图像，居中，然后为div元素设置固定的宽度和高度。

<style>
.imgpanel{
  margin-bottom: 3px; 
  float: left;
  background-repeat:no-repeat;
  background-position:center;
  width:200px;
  height:200px; 
}
</style>


<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>

或者，您可以将图像放在div标记中，并将溢出设置为隐藏：

<style>
.imgpanel{
  margin-bottom: 3px; 
  float: left;
  width:200px;
  height:200px; 
  overflow:hidden;
}
</style>

<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>

或者，如果可以调整图像大小，您可以使用缩略图生成脚本来创建始终具有所需特定大小的图像。查看http://sourceforge.net以获取缩略图生成器的代码示例。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10547688

复制

相似问题

问HTML:图片漂浮在左边？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:图片漂浮在左边？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:图片漂浮在左边？
EN