Redimensionner les images automatiquement lors du redimensionnement de la fenêtre

Question

J'affiche un nombre de type d'entrée = image. Les images s'affichent comme je le souhaite dans une fenêtre plus grande mais lorsque la fenêtre se rétracte, comme sur un téléphone, les images/lignes changent mais pas la taille de chaque image. J'ai posté une question similaire et on m'a dit d'utiliser display: inline-flex mais quand j'essaye que dans ce cas la disposition dans la plus grande fenêtre n'est pas espacée comme je le veux.

Donc j'essaye de faire rétrécir toutes les images comme le fait la taille de la fenêtre mais aussi de garder la disposition dans laquelle elles sont - uniformément espacées en rangées.

Et il y a aussi une question mineure de centrer le nom de la couleur. J'ai utilisé sur le premier et ça marche. Est-ce la façon de le faire ou est-ce que l'une des classes peut être modifiée pour le faire?

jsfiddle

.imgStr {display:inline-block; } 
    .imgInput {width:100px; max-width:100px;} 
    img{border:solid 1px #9a9a9a; margin:10px;} 
    .selected{ box-shadow:0px 12px 22px 1px #333 } 

    .transition { 
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6); 
    -o-transform: scale(1.6); 
    transform: scale(1.6); 
    } 
    #enlarge { 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    } 
    #enlarge { margin:0px; } 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <div class="imgStr shadow"><center><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Beige</center></div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Black</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br />Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Navy</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Baby Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Chocolate</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Dark Grey</div> 

Answer 1

Pour une CSS seule solution , vous cherchez @media-query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries):

<style> 
.your-image { 
    transition: all 0.5s ease; 
    width: 200px; 
} 

@media (max-width: 600px) { 
    .your-image { 
    width: 100px; 
    } 
} 
</style> 

Cela dit « si la fenêtre est inférieure à 600px de largeur, les images de la classe your-image doivent avoir une largeur différente ".

---

OMI la solution CSS est assez propre, mais si vous vouliez utiliser Javascript, vous pourriez faire quelque chose comme:

function foo() { 
    ...do your resizing here... 
} 

window.addEventListener('resize', foo); 

Answer 2

Pour autant que je comprends, vous voulez avoir des images sensibles qui poussent et rétrécir liés à la taille de la fenêtre des utilisateurs.

Je ne suis pas sûr qu'il existe un moyen facile de le faire en css normal mais Bootstrap (heureusement) a cela intégré!

<img src="foo.jpg" class="img-responsive"> 

ajouter simplement la classe « img sensible » à votre image, il deviendra sensible & échelle à la taille de tout élément parent, il est dans.

Bootstrap responsive image documentation