相同 CSS 类的图像（Bootstrap 中的 .thumbnail）以各种尺寸显示

Question

我遇到了设计/css 问题。我正在使用 Twitter Bootstrap 并有一个 .row-fluid，其中包含一个无序列表的类缩略图。在其中，我有三个 .span3 类，我在其中显示作为类 .thumbnail 链接的图像（下面的代码）。问题是，由于某种原因，图像显示为不同的尺寸。你可以参考我这里说的：http://douglascrescenzi.com/#portfolio

HTML 代码：

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <h2>Companies I've founded</h2>
            <a href="http://www.herodaysecurity.com" class="thumbnail" target="_blank">
            <img src="images/hero-day.jpg" alt="Hero Day Security"></a>
            <br>
            <br>
            <a href="http://www.crowdrouser.com" class="thumbnail" target="_blank">
            <img src="images/crowdrouser.jpg" alt="CrowdRouser"></a>
        </li>
        <li class="span3">
            <h2>Employers</h2>
            <a href="http://syracusestudentsandbox.com/" class="thumbnail" target="_blank">
            <img src="images/student-sandbox.jpg" alt="Syracuse Student Sandbox"></a>
            <br>
            <br>
            <a href="http://ischool.syr.edu/" class="thumbnail" target="_blank">
            <img src="images/su-informaiton-studies.jpg" alt="Syracuse University - School of Information Studies"></a>
            <br>
            <br>
            <a href="http://www.mitre.org" class="thumbnail" target="_blank">
            <img src="images/mitre.jpg" alt="The MITRE Corporation"></a>
        </li>
        <li class="span3">
            <h2>Freelance</h2>
            <a href="http://www.accsocialsecurityservices.com/" class="thumbnail" target="_blank">
            <img src="images/acc-sss2.png" alt="ACC Social Security Services"></a>
        </li>
    </ul>
</div> <!--row-fluid -->

引导 CSS：

.thumbnails {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}

.thumbnails:before,
.thumbnails:after {
  display: table;
  content: "";
}

.thumbnails:after {
  clear: both;
}

.row-fluid .thumbnails {
  margin-left: 0;
}

.thumbnails > li {
  float: left;
  margin-bottom: 18px;
  margin-left: 20px;
}

.thumbnail {
  display: block;
  padding: 4px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

a.thumbnail:hover {
  border-color: #0088cc;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.span3 {
  width: 220px;
}

.row-fluid .span3 {
  width: 23.404255317%;
  *width: 23.3510638276383%;
}

我确信这不是最好的处理方式，但它几乎可以工作（除了显示的图像大小略有不同。

非常感谢任何想法和建议。谢谢！

Answer 1

您的图片以不同的尺寸显示，因为它们具有不同的高宽比。它们都被缩小到340px 宽度，但是如果其中一个最初是680x680 而另一个是680x340，那么缩小后它们将分别是340x340 和340x170。

要解决此问题，您可能希望自己将图像剪切成合适的尺寸。另外我建议您进行一些图像优化，因为您在该页面上的图像宽度超过 2000 像素，但您只需要 340。这将节省大量带宽并使您的页面加载速度更快。

有一个快速的脏修复，我不推荐使用，但你应该知道 - 只需将图像的高度设置为相同：

.thumbnail > img {
    display: block;
    height: 100px; /* add this */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}