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

我正在寻找一个只使用CSS的解决方案，将图像缩小到浏览器窗口的大小（X像素）。我已经找到了很多JavaScript解决方案，但我只想让它成为CSS。可以这样做吗？如果可以，怎么做

img {
    width: 100%;
}

多田！！：）

演示：

编辑：

其中div上的边距属性为x像素。 显然，这意味着将你的img包装在一个div中。 像这样：

再次编辑：只需一个注释，而不是使用

margin

属性，您可以使用单独的

margin left

和

margin right

属性：

这个怎么样

HTML:

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

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

---

怎么了？把它放在一个有200px右边距的容器中应该是正确的方法为什么它必须是一个只有css的解决方案？@Pekka“200px”从哪里来？@w3d好吧，不管“x像素量”应该超过多少，你错过了“-x”像素量部分。@david：什么部分？编辑：没关系，我明白了。在最初的问题中，我同意缺少-x像素，但它必须是一个css唯一的解决方案，我认为这是最好的选择。OP可以将其更改为98%、45%等。我误解了这意味着什么。我马上回来，给出第二个答案。@Loktar

98%

不等于

（100%定义的像素量）

，不是很长一段时间，为什么

位置：绝对

？应该没有必要。

margin right:100px

行得通吗？对我来说行得通：（编辑：嗯，几乎可以，如果你的宽度低于100px，图像看起来会重置为原始大小。可能需要一些更精细的调整。）@30不过，你的解决方案在尺寸非常小的情况下表现更好。缩小浏览器窗口显示了不同之处我的另一个优点是背景已经在后面了：@Pekka你已经调整好了吗？在Firefox（Win）中，它在100px以下对我来说似乎工作正常。

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

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