html - 相同 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 -->

Bootstrap 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%;
}