Question

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

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

从我的阅读中看来，我应该能够使用其中之一并为用户创建相同的体验，因此很想知道如何将background-img属性从下面的代码复制到我的{代码中{1}}标记。

请参阅以下代码。

设置img属性。这就像我喜欢的那样。

HTML

background-image

CSS

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

具有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%; }属性。要复制与上述css相同的行为需要做些什么？我试过玩弄所有属性，但无法解决这个问题。

HTML

<img>

CSS

<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>

Answer 1

您可以尝试在img

上使用object-fit: cover;

Answer 2

您可以使用.owl-carousel CSS声明执行此操作。请注意您可以在此处查看的浏览器支持http://caniuse.com/#search=object-fit。下面是一个示例代码段，两个选项都在另一个下面，用于演示效果。

 .submenu{
    display:none;
}

object-fit

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

2 个答案: