Question

我有一系列图像（约100个左右）已经调整大小，以便它们适合130x130的背景框。图像宽130或高130。如何设置图像样式，使其显示在130px框的中间。

这是我想要达到的效果：http://i.imgur.com/LY1Ag.png

Answer 1

这是另一种方法，它有两个主要区别：避免使用背景图像（使用其中提到的Nightfirecat在语义上很奇怪）并将图像放在无序列表中。后者不是必需的，但可以说是遵循CSS最佳实践。

我没有进行过广泛的测试，但是最近的Firefox，Chrome和IE用于PC。我必须根据this page's suggestions为IE7添加一个hack。这就是每个列表项空<span>的原因。

CSS：

<style type="text/css">
#boxes {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
 }
#boxes li {
    float: left;
    border: 1px solid #333;
    margin: 30px;
}
#boxes li div {
    position: relative;
    width: 130px;
    height: 130px;
    text-align: center;
    display: block
}
#boxes li div img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
    vertical-align: middle;
}
#boxes li div img {
  position: relative;
}
#boxes li div span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

HTML：

<ul id="boxes">
  <li><div><span></span><img src="wide1.jpg"></div></li>
  <li><div><span></span><img src="wide2.jpg"></div></li>
  <li><div><span></span><img src="wide3.jpg"></div></li>
  <li><div><span></span><img src="tall1.jpg"></div></li>
  <li><div><span></span><img src="wide4.jpg"></div></li>
  <li><div><span></span><img src="tall2.jpg"></div></li>
</ul>

快速完成，所以完全有可能存在一些错误。

Answer 2

如果您将它们用作div的背景，那么您已全部设置：

CSS：

div.box-images div {
    float: left; /* has them left-align */
    height: 130px;
    width: 130px;
    margin: 12px; /* gives them gutters in between */
    background-position: 50% 50%; /* ensures they're centered */
    background-repeat: no-repeat;
    border: 2px solid #ccc;
}

HTML：

<div class='box-images'>
    <div style='background-image: url(images/sample1.png);'></div>
    <div style='background-image: url(images/sample2.png);'></div>
    [etc.]
    <br style='clear: both;' />
</div>

Answer 3

我个人不会使用背景图片。

如果可能的话，我会在每个包含这些图像的框中应用一个类。如你所说，盒子会设置高度和宽度。

然后，使用jQuery或javascript，根据图像的高度或宽度添加一个类。因此，如果宽度为130px，请添加顶部和底部填充类。如果图像高130，请添加左右填充类。

希望这有意义并帮助你。如果您需要我详细说明，请告诉我。

Answer 4

虽然我只测试了fx，chrome和IE9，但您可以在图片上使用vertical-align: middle + line-height: 130px，如下所示：

的CSS：

div.box {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
}

div.box img {
    vertical-align:middle;
}

HTML

<div class="box">
    <img src="image1.jpg">
</div>
<div class="box">
    <img src="image2.jpg">
</div>

当图像与盒子的高度相同时，我会有点推动。其他人都知道为什么？你可以在这里看到它：http://jsfiddle.net/9bu5Z/1/

使用CSS在网格中定位各种大小的图像

4 个答案: