html - 使用 background-image over img 属性的响应图像

Question

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

(类似于这个 fiddle http://jsfiddle.net/QfDv5/ 除了我使用了单独的图像。)

但是，为了便于更新，我想将图像路径添加到 css 文件而不是 HTML 标记。我认为 img-background 属性可以很好地做到这一点。也就是说，我想远离“背景大小”属性，因为旧版浏览器不能很好地使用它。

我想在每个缩放类 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;}
}