將圖像的比率保存在高度調整大小的柔性容器中

我在flex容器中的圖像出現問題。當容器/窗口高度減小/調整大小時，我希望它保持比例。將圖像的比率保存在高度調整大小的柔性容器中

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 60%; 
 
    border: 1px solid red; 
 
} 
 

 
.image-container { 
 
    display: flex; 
 
    align-items: center; 
 
    max-width: 30%; 
 
    height: 100%; 
 
    background: green; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: yellow; 
 
}

<div class="wrapper"> 
 
    <div class="image-container"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/1200px-Clouds_over_the_Atlantic_Ocean.jpg" alt=""> 
 
    </div> 
 
    <div class="content"> 
 
    <span>Some content</span> 
 
    </div> 
 
</div>

當您嘗試這樣做，你可以看到，只有圖像高度的變化，但寬度保持不變，圖像被那種捉襟見肘。

當我從圖像容器中刪除'display：flex'時，圖像大小調整良好。我讓它變成了flex，因爲我希望它能夠居中。

有沒有一種方法來保持比例和流暢地調整圖像和容器的其餘部分？

來源

2017-12-03 somedev

在這個'fiddle'無拉伸，寬度和高度調整大小。 – Pedram

嘗試調整輸出窗口的大小。 – somedev

@pedram，通常在我的應用程序中我有一個選項，當用戶執行特定操作時，此包裝容器會降低其高度。這就是爲什麼我在這個時候談論窗口大小調整的原因。當你不斷減小輸出窗口的高度時，你會看到圖像的寬度不會改變。 – somedev

剛上IMG添加object-fit: cover;標籤：

img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

JSFiddle

來源

2017-12-03 07:00:15 Sonia

將圖像的比率保存在高度調整大小的柔性容器中

回答

相關問題