Comment créer des images horizontales et verticales évolutives?

Question

Je travaille avec plusieurs images configurées comme inline-block et overflow: scroll.

Actuellement toutes les images sont dans la même classe = "parent-container" mais seules les images horizontales sont mises à l'échelle, mes images verticales restent de la même taille lorsque l'écran change de taille.

Je cherche tous mes mes images à l'échelle.

Mon HTML

<div class="parent-container"> 

<div class="container"> 
<img src="1.jpg" alt="" class="image" style="width:100%"> 
</div> 

<div class="container"> 
<img src="2.jpg" alt="" class="image" style="width:100%"> 
</div> 

<div class="container"> 
<img src="3.jpg" alt="" class="image" style="width:100%"> 
</div> 


<div class="container"> 
<img src="4.jpg" alt="" class="image" style="width:100%"> 
</div> 

<div class="container"> 
<img src="5.jpg" alt="" class="image" style="width:100%"> 
</div> 

</div> 

Mon CSS

.parent-container { 
width: 100%; 
max-width: 1175px; 
height: auto; 
padding: auto; 
overflow: scroll; 
overflow-y: hidden; 
margin-left: 35px; 
margin-top: 5px; 
white-space: nowrap; 
display: inline-block; 
} 

.container { 
position: relative; 
display: inline-block; 
padding-right: 15px; 
padding-left: 15px; 
} 

.image { 
opacity: 1; 
display: inline-block; 
width: 100%; 
height: auto; 
transition: .5s ease; 
backface-visibility: hidden; 
padding-right: 15px; 
} 


.parent-container .container .image { 
width: auto\9; /* IE8 */ 
} 

Merci!

Exemple de travail: https://jsfiddle.net/kjfomeze/

Answer 1

Vous pouvez essayer d'ajouter object-fit: cover; à vos images, avec un height fixe. Cela devrait redimensionner vos images.

.parent-container { 
 
    width: 100%; 
 
    max-width: 1175px; 
 
    height: auto; 
 
    padding: auto; 
 
    overflow: scroll; 
 
    overflow-y: hidden; 
 
    margin-left: 35px; 
 
    margin-top: 5px; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100px; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
    object-fit: cover; 
 
}

<div class="parent-container"> 
 

 
    <div class="container"> 
 
    <img src="https://dummyimage.com/100x100/000/fff" alt="" class="image" style="width:100%"> 
 
    </div> 
 

 
    <div class="container"> 
 
    <img src="https://dummyimage.com/200x150/000/fff" alt="" class="image" style="width:100%"> 
 
    </div> 
 

 
    <div class="container"> 
 
    <img src="https://dummyimage.com/200x100/000/fff" alt="" class="image" style="width:100%"> 
 
    </div> 
 

 

 
</div>