Question

I’m having a design/css issue. I’m using Twitter Bootstrap and have a .row-fluid, with an unordered list of class thumbnails. Inside that, I have three .span3 classes where I am displaying images that are links of class .thumbnail (code below). The problem is, the images are displaying as different sizes for some reason. You can reference what I’m talking about here: 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%;
}

I’m sure this isn’t the best way to do things, but it’s almost working (aside from the slight different sizes in the images that are displaying.

Any thoughts, suggestions are very much appreciated. Thanks!

Answer 1

Your images are showing in different sizes because they have different height/width ratios. They all being shrunk to 340px width, but if one of them originally 680x680 and the other is 680x340 then after the shrinking they will be 340x340 and 340x170 respectively.

To fix that you might want to cut your images yourself to be the right size. Also I’d suggest to do some image optimization because you have images more than 2000px wide on that page, but all you need is 340. That will save a lot of bandwidth and make your page load much faster.

There is a quick dirty fix, that I’d NOT recommend to use, but you should know about it – just set the height of the images to be the same:

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