如何製作橫幅響應和規模適當 - 不使用背景屬性

Question

有沒有一種辦法可以讓一個橫幅響應和圖像比例properly..ie高度保持相同的具有以下結構

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

也。 ..將寬度和高度屬性替換爲banner1.png的大小。

另一方面，如果您不瞭解Bootstrap，請檢查其響應框架，一個簡單的「img-responsive」類，將使所有圖像響應。