使用img属性的背景图像的响应图像

Question

我正在创建一个响应式网站，我在HTML标记中使用了img属性，以便图像可以很好地扩展，以便通过媒体查询移动它们。

（类似于这个小提琴http://jsfiddle.net/QfDv5/，除了我使用了单独的图像。）

但是，为了便于更新，我想将图像路径添加到css文件而不是HTML标记。我认为img-background属性会很好。也就是说，我想远离背景大小＆＃39;属性，因为较旧的浏览器不能很好地使用它。

我想过在每个缩放类div中创建一个元素。 div水平缩放 IF 我声明了一个固定的高度，但我似乎无法让它自动垂直缩放。我补充说：

#test-2{
    width:100%;
    height:100px;
    background-image:url("http://www.desibucket.com/db2/01/26039/26039.jpg");
}

jsfiddle

1. 在没有固定高度的情况下让新元素缩放，我缺少什么？
2. 如何使用新元素来缩放实际背景图像？

由于

Answer 1

解决方案是使用媒体查询并设置您想要的确切高度。

media screen and (min-width: 1234px) and (min-height:700px) {
image {height: xxxpx;}
}