Les Images de la même classe CSS (.vignettes dans le Bootstrap) sont affichés en différentes tailles

Je vais avoir un design/css question. Je suis en utilisant Twitter Bootstrap et un .ligne fluide, avec une liste non-ordonnée de la classe des vignettes. À l'intérieur, j'ai trois .span3 les classes où je suis d'affichage des images qui sont des liens de classe .miniature (code ci-dessous). Le problème est, les images s'affichant en tant que tailles différentes pour quelque raison. Vous pouvez faire référence à ce dont je parle ici: http://douglascrescenzi.com/#portfolio

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

Je suis sûr que ce n'est pas la meilleure façon de faire les choses, mais c'est presque de travail (à l'exception de la légère tailles différentes dans les images qui ne s'affiche.

Des idées, des suggestions sont très appréciés. Merci!

OriginalL'auteur dougiebuckets | 2012-07-04