如何使橫幅廣告具有響應性並正確縮放-通過不使用背景屬性

Question

有沒有一種方法可以使橫幅響應並正確縮放圖像..即高度與以下結構相同

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

我知道使用CSS可以為班級橫幅制作圖像背景圖像。 但是有可能產生

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

Answer 2

嘗試將以下類添加到圖像中：

<img src="/img/banner1.png" width="460" height="345" class="responsive">

CSS：

.responsive {
    width: 100%;
    height: auto;
}

另外...將width和height屬性替換為banner1.png的大小。

另外，如果您不了解Bootstrap，請檢出它們的響應框架（一個簡單的“ img響應”類），使所有圖像都響應。