图像大小浏览器高度 - X像素数。 CSS-而已！

Question

我正在寻找一种仅限CSS的解决方案，将图像缩小到浏览器窗口的大小 - X像素数量。我发现了很多JavaScript解决方案，但我想让它只用于CSS。可以这样做，如果是，那怎么办？

Answer 1

这个怎么样？

Live Demo

<强> HTML：

<div><img src="http://www.google.com/images/logos/ps_logo2.png" /></div>

<强> CSS：

div {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px
}
img {
    width: 100%
}

Answer 2

img {
    width: 100%;
}

多田!! ：）

演示： http://jsfiddle.net/bqbGY/

编辑：

div {
    left: 0px;
    margin: 15px;
    position: absolute;
}
img {
    position: relative;
    width: 100%;
}

div上的margin属性是x像素。 显然，这意味着将你包装成一个div。 像这样：

<div>
    <img src="" />
</div>

再次修改：只需注释，您可以使用单独的margin和margin-left属性，而不是使用margin-right属性。 ：）