模仿背景大小：封面与img在一个div与CSS只有

Question

这可能吗？下面的代码复制了一半的行为，图像将始终覆盖div。问题是，如果div小于img的尺寸，它将始终在两个轴上被裁剪。

将max-width: 100%或max-height: 100%添加到img会导致图像扭曲。有没有什么办法可以解决这个问题，而不使用JavaScript/background-img。

div { 
 
    background-color: red; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 

 
div.tall { 
 
    height: 400px; 
 
} 
 

 
div.wide { 
 
    width: 400px; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
img.tallCat { 
 
    max-width: 100%; 
 
} 
 

 
img.wideCat { 
 
    max-height: 100%; 
 
}

Expected output: 
 
<div style="background-image:url(https://i.stack.imgur.com/XCOwb.jpg);background-size:cover;"> 
 
</div> 
 

 
Actual output: 
 
<div> 
 
    <img src="https://i.stack.imgur.com/XCOwb.jpg"> 
 
</div> 
 

 
Actual output with max-width: 
 
<div class="tall"> 
 
    <img class="tallCat" src="https://i.stack.imgur.com/XCOwb.jpg"> 
 
</div> 
 

 
Actual output with max-height: 
 
<div class="wide"> 
 
    <img class="wideCat" src="https://i.stack.imgur.com/XCOwb.jpg"> 
 
</div>

Answer 1

还有就是object-fit参数，你想要做（你可以将其设置为cover或contain）的东西，但它不是由IE /边缘尚不支持：http://caniuse.com/#search=fit

增加：看看这个设置片段（图像标记内提供的原始图像的尺寸，对于具有width: 100%图像CSS规则）：

div { 
 
    background-color: blue; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin-bottom: 50px; 
 
} 
 

 
img.x { 
 
    width: 100%; 
 
    object-fit: contain; 
 
} 
 
img.y { 
 
    width: 100%; 
 
    object-fit: cover; 
 
}

<div> 
 
    <img src="http://placehold.it/500x200/fa0" width="500" height="200" class="x"> 
 
</div> 
 
<div> 
 
    <img src="http://placehold.it/500x200/fa0" width="500" height="200" class="y"> 
 
</div>

Answer 2

隐藏图像（visibility:hidden或opacity:0），并将其应用到div作为你的标记的背景图像。当然，如果你这样做，它会引发你为什么需要img元素的问题。