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

Question

我正在制作一个响应性的网站，我在HTML标记中使用了img属性，这样图像就可以很好地缩放，直到它们被媒体查询所移动。

(类似于这个小提琴http://jsfiddle.net/QfDv5/，只是我使用了不同的图像。)

但是，为了便于更新，我希望将图像路径添加到css文件中，而不是HTML标记中。我觉得img-后台属性会很好。这就是说，我想远离“背景大小”属性，因为旧的浏览器对它不友好。

我想在每个缩放类div中创建一个元素。如果i声明一个固定的高度，则div可以水平缩放，但我似乎无法使它自动垂直缩放。我补充说：

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

小提琴

1. 在没有固定高度的情况下，让新元素进行缩放，我遗漏了什么？
2. 如何才能使实际的背景图像与新元素进行缩放？

谢谢

Answer 1

解决方案是使用媒体查询并设置所需的精确高度。

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