如何創建可縮放的水平和垂直圖像？

Question

我正在處理幾個設置爲內聯塊和溢出的圖像：滾動。

當前所有圖像都在同一個class =「parent-container」中，但只有水平圖像縮放，當屏幕更改大小時，我的垂直圖像保持相同大小。

我在找全部我的圖像需要縮放。

我的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> 

我的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 */ 
} 

謝謝！

工作實例：https://jsfiddle.net/kjfomeze/

Answer 1

你可以嘗試添加object-fit: cover;到您的圖像，具有固定height。這應該縮放您的圖像。

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