Question

我有设计/ CSS问题。我正在使用Twitter Bootstrap，并且有一个.row-fluid，带有无序的类缩略图列表。在里面，我有三个.span3类，我在这里显示的是类.thumbnail（下面的代码）的链接。问题是，由于某种原因，图像显示为不同的大小。你可以参考我在这里谈论的内容：http://douglascrescenzi.com/#portfolio

HTML code：

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

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

1 个答案: