html - 在图像标签中复制 background-img 属性

Question

我正在处理一个响应式页面，并且有一个大背景图像，无论用户使用什么尺寸的设备，我都希望它保持比例。当我使用 img为此它的标记延伸到屏幕底部之外，所以我使用 background-img属性代替。这是可行的，但我开始使用 img标记，无法复制与 background-img 相同的行为.

Based on this SO Post我相信我应该使用 img 来实现相同的效果或 background-img

根据我的阅读，我似乎应该能够使用其中任何一个并为用户创造相同的体验，所以很想知道如何复制 background-img将下面代码中的属性添加到我的代码中 img标签。

请看下面的代码。

随着 background-image属性集。这按我喜欢的方式工作。

HTML

<div id="container">
    <div class="main-image">
    </div>
</div>

CSS

html, body {
    width: 100%;
    margin: 0;
}
.main-image {
    background: url(http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg) center center no-repeat;
    background-size: cover;
    max-height: 90%;
 }

与 <img>属性。需要做什么来复制与上面的 css 相同的行为？我试过玩弄所有属性，但无法弄清楚这一点。

HTML

<div id="container">
    <div class="main-image">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg">
    </div>
</div>

CSS

html, body {
    width: 100%;
    margin: 0;
}

.main-image {
    width: 100%;
    max-height: 90%;
 }

img { 
    width: 100%;
 }

Answer 1

您可以尝试在 img 上使用 object-fit: cover;