html - 如何使横幅具有响应性和正确缩放 - 通过不使用背景属性

Question

有没有一种方法可以使横幅响应并正确缩放图像..即高度与以下结构保持相同

<div class="banner">
    <img src="/img/banner1.png" alt="Banner">
</div>

我知道用 css 我们可以为类(class)横幅制作图像背景图像。但是有没有可能有这样的效果

background-position, background-size

具有上述结构。

Answer 1

删除 img 尝试将此 css 添加到您的 .banner :

.banner { 
    background-image: url('/img/banner1.png');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
}