如何制作横幅响应和规模适当 - 不使用背景属性

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”类，将使所有图像响应。