100％高度或100％寬度

Question

我該如何製作一張圖像，以便無論如何填充圖像並保持其高寬比？例如，如果圖像足夠寬，則其擴大到也足夠高並且隱藏溢出，反之亦然。這是我迄今爲止的，但如果圖像需要調整到100％的高度，它不會擴大超出框的寬度，並使圖像變形。

.box{ 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 
.image{ 
    min-width: 100%; 
    min-height: 100%; 
} 

<div class="box"> 
    <img class="image" src="/img.jpg"> 
</div> 

Answer 1

我放棄了，在我的DIV使用下面的CSS：

background: url("dynamic-img.jpg") repeat scroll center center/cover rgb(191, 30, 46) 

Answer 2

另一種選擇CSS方法是利用cover

background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover; 

詳見來源：https://css-tricks.com/almanac/properties/b/background-size/