模仿背景大小：封面與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元素的問題。