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">

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

如何解决这个问题？

4

4 回答 4

1

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

<style>
img{margin-bottom: 3px; width: 150px; float: left}
</style>
于 2012-05-11T08:09:23.510 回答
1

使用一点 javascript，您可以将它们全部设置为相同的大小。但它看起来不会好很多。也许相同的宽度和不会令人讨厌的简单重复背景将是一种妥协。

于 2012-05-11T08:10:38.740 回答
0

限制尺寸

img {
    max-width: 100px;
    max-height: 100px;

    border: 1px solid grey; /* show visible element size */
}

示例：http:
//jsfiddle.net/UqGW7/3/

修正尺寸（拉伸）

img {
    width: 100px;
    height: 100px;

    border: 1px solid grey; /* show visible element size */
}

示例：http:
//jsfiddle.net/UqGW7/4/

裁剪图像（使用包装）

<span class="wrapper">
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/592211_21253884267_736366040_q.jpg" />
</span>


.wrapper {
    width: 100px;
    height: 100px;

    display: inline-block;
    overflow: hidden; /* crop larger images */

    border: 1px solid grey; /* show visible element size */

    text-align:center; /* center horizontally */
}

示例：http:
//jsfiddle.net/UqGW7/5/

于 2012-05-11T08:34:08.900 回答
0

如果不是非常需要显示整个图像，您可以考虑将图像放在 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以获取缩略图生成器的代码示例。

于 2012-05-11T08:33:30.307 回答