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/