容器内

Question

我正在尝试将可缩放图像放在标题容器中，以便图像变大或变小，具体取决于查看页面的大小。除了缩放之外，在特定断点之外渲染完全不同的图像是合适的，以使细节量与图像的大小相对应。我不知道html语句是否可用于根据视图大小选择要渲染的图像，因此似乎必须通过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. 图像的实际尺寸为900px×300px，
2. 容器宽1000px，
3. 图片的css指定width: 33%;

然后

1. 图像将缩放到300px宽，
2. 图像会缩放到100px高，
3. 图像高度会（可能）迫使容器扩展以适应 图像

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

Answer 1

我正在谈论图像响应性检查下面的示例视图

http://output.jsbin.com/vocojavepu

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

这里我使用了img-responsive一个bootstrap类和自定义类

.responsive-img{
    width:100%;
}