Question

我的大麻是一页,展示了许多图像。

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

It looks good if they all have the same width and height. But what happens when one of them has a larger size? It messes all the layout, showing a white space that makes it look ugly.

如何确定这一点?

Answer 1

为什么不给你带宽:150px或你想要的那块 c子里的大小?

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

Answer 2

With a bit javascript you could bring them all to the same size. But it won t look much better. Maybe the same width and a simple repeating background which won t be annoying would be a compromise.

Answer 3

Limit sizes

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

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

Sample:
http://jsfiddle.net/UqGW7/3/

Fixes sizes (strech)

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

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

Sample:
http://jsfiddle.net/UqGW7/4/

Crop images (using a wrapper)

<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 */
}

Sample:
http://jsfiddle.net/UqGW7/5/

Answer 4

如果不十分有必要显示整个形象,那么你可以考虑把你的图像作为背景图像,把图像集中起来,然后为散射分子设定固定的宽度和高度。

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

Or you can place the image within the div tags and set the overflow to hidden:

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

Optionally, you can use a thumbnail generation script to create images that are always the specific size you want, if re-sizing the image is okay. Check http://sourceforge.net for code samples of a thumbnail generator.

Limit sizes

Fixes sizes (strech)

Crop images (using a wrapper)

友情链接