Wie erstelle ich skalierbare horizontale und vertikale Bilder?

Question

Ich arbeite mit mehreren Bildern, die als Inline-Block und Überlauf eingerichtet sind: scroll.

Momentan befinden sich alle Bilder innerhalb derselben Klasse = "Eltern-Container", aber nur die horizontalen Bilder skalieren, meine vertikalen Bilder bleiben gleich groß, wenn der Bildschirm die Größe ändert.

Ich suche nach alle meine Bilder zu skalieren.

Mein 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> 

Meine 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 */ 
} 

Thank you!

Arbeitsbeispiel: https://jsfiddle.net/kjfomeze/

Answer 1

können Sie versuchen, object-fit: cover;, um Ihre Bilder hinzufügen, mit einem festen height. Dies sollte Ihre Bilder skalieren.

.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>