css - 容器内可扩展和可交换的图像

Question

我正在尝试将可缩放图像放置在 header 容器中，以便图像根据查看页面的大小变大或变小。除了缩放之外，还可以在某些断点之外渲染完全不同的图像，以便细节量与图像的大小相对应。我不知道是否 html语句可用于根据 View 大小选择要渲染的图像，因此似乎必须通过 css 选择图像:

.banner_img {
    background-image: url(image1.png);
    background-repeat: no-repeat;
    …
} 

@media (max-width: 1200px) {
    .banner_img { background-image: url(img/image2.png); } 
} 

@media (max-width: 800px) {
    .banner_img { background-image: url(img/image3.png); } 
} 

@media (max-width: 400px) {
    .banner_img { background-image: url(img/image4.png); } 
} 

使用 <img> 的优势标签是，在设置图像宽度对应容器的宽度时，图像高度会根据图像宽度缩放，容器会扩展以适应图像的高度(只要其他设置没有阻止那)。换句话说，如果

1. 图片的实际尺寸为 900 x 300 像素，
2. 容器宽度为 1000px，并且
3. 图像的 css 指定 width: 33%;

然后

1. 图像将缩放到 300 像素宽，
2. 图像会缩放到 100 像素高，并且
3. 图像高度会(可能)迫使容器扩展以适应 图片

可以对 <div> 做同样的事情吗？标签？为了允许交替图像，似乎需要将它们放在 <div> 中。在html .我们可以设置 <div>宽度为 width: 33%; ，但以这种方式缩放宽度不会强制其容器的高度在需要时扩展。设置 <div> 的高度可以强制容器增长，但为了做到这一点，我们需要将高度设置为 <div> 宽度的百分比。 ，而不是容器的固定高度或百分比，如 css允许。

Answer 1

关于图像响应，请查看下面的示例 View

http://output.jsbin.com/vocojavepu

代码在这里 http://jsbin.com/vocojavepu/2/edit?html

这里我使用了 img-responsive 引导类和自定义类

.responsive-img{
    width:100%;
}