Comment faire des images hauteur/largeur/padding échelle automatique pour adapter correctement les images

Question

Ce que je veux faire est de faire changer les images sur ce site en largeur et en hauteur (elles doivent être égales) entre 50-60px. Cependant, entre eux, ils doivent tous avoir un minimum de 5px. Cela peut varier en fonction de la taille des images, c'est le cas car les deux images finales doivent s'adapter aux bords de la div parente, pour s'aligner avec une image à ce sujet. La hauteur/largeur/rembourrage devrait tous changer pour assurer que les images sont toujours correctement alignées lorsque la taille de l'écran change.

Si vous regardez cette page, vous serez en mesure de voir ce que je veux dire. Les images qui doivent changer sont les carrés gris en bas.

http://media.gaigo.org/work2.html

Ceci est mon html:

<div class="smallImages"> 
    <div><a href="#item-1"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-2"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-3"><img src="static/img/smallImage.png"></a></div> 
    <div><a href="#item-4"><img src="static/img/smallImage.png"></a></div> 
</div> 

et mon css est la suivante:

smallImages div { 
    display: inline-block; 
    padding: 5px; 
} 
.smallImages div img { 
    max-width: 60px; 
    min-width: 50px; 
    max-height: 60px; 
    min-height: 50px; 
} 

Désolé si cela semble confus. Demandez simplement si vous avez besoin de moi pour expliquer plus.

Answer 1

Voici ce que vous cherchez.

L'affichage du bloc inline ne permet pas aux images de se comporter de la manière dont vous devez utiliser la table.

Vous devez simplement vérifier le code source du site que vous travaillez à partir ..

.row { 
 
    display: table-row; 
 
} 
 
.smallImages { 
 
    padding-left: 0px; 
 
    margin-bottom: 0px; 
 
    display: table; 
 
    text-align: center; 
 
} 
 
.smallImages .row div { 
 
    display: table-cell; 
 
    padding: 5px; 
 
} 
 
.smallImages .row div:first-child { 
 
    padding-left: 0; 
 
} 
 
.smallImages .row div img { 
 
    max-width: 100%; 
 
} 
 
img { 
 
    border: 0; 
 
}

<div class="smallImages"> 
 
    <div class="row"> 
 
    <div> 
 
     <a href="#item-1"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-2"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-3"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-4"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-5"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-6"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-7"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-8"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-9"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-10"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-11"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#item-12"> 
 
     <img src="http://media.gaigo.org/static/img/smallImage.png"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Une option est de fixer des largeurs de pourcentage, mais ce pourcentage de nombre dépend du nombre d'images dans votre rangée. Voir cet exemple:

* { 
 
    box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */ 
 
} 
 
.container { 
 
    width:400px; /* set this to whatever you like, it should work still */ 
 
    padding:5px; 
 
    border:1px solid; 
 
} 
 
.row { 
 
    width:100%; 
 
    padding:0 5px; 
 
} 
 
.row img { 
 
    padding:5px; 
 
} 
 
.row.one img { 
 
    width:100%; 
 
} 
 
.row.two img { 
 
    width:50%; 
 
} 
 
.row.three img { 
 
    width:33.33%; 
 
} 
 
.row.four img { 
 
    width:25%; 
 
}

<div class="container"> 
 
    <div class="row one"> 
 
    <img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row two"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row three"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="row four"> 
 
    <img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"><!-- 
 
    --><img src="http://placehold.it/150x150"> 
 
    </div> 
 
</div>

Mettre les commentaires HTML entre les lignes signifie qu'il n'y a pas d'espace entre les images.