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
Vous devez vous connecter pour publier un commentaire.
Vos images s'affichent dans différentes tailles, car ils ont une différente hauteur/largeur des ratios. Ils ont tous d'être diminués
340px
largeur, mais si l'un d'eux à l'origine680x680
et l'autre est680x340
puis, après la diminution de la ils seront340x340
et340x170
respectivement.De fixer ce que vous pourriez voulez couper vos images vous-même pour être à la bonne taille. Aussi je vous suggère de faire quelques optimisation de l'image parce que vous avez des images de plus de 2000px de large sur cette page, mais tous vous avez besoin est de 340. Qui vous fera économiser beaucoup de bande passante et de faire votre page de chargement beaucoup plus rapide.
Il y a un quick fix sale, que j'avais PAS recommandons d'utiliser, mais vous devez savoir, c' - il suffit de régler la hauteur des images à la même:
Fonctionne pour moi.. Essayez de régler la hauteur des images dans
.span3 img { height: 100px }
Grâce Zoltan -- j'ai oublié j'ai été en utilisant deux fichiers css (n'ai pas touché ce site en temps). Merci de votre temps!
désolé j'ai oublié d'accepter cette réponse! merci encore pour votre aide 😉
OriginalL'auteur Zoltan Toth