图像尺寸浏览器高度-X像素数量。仅使用CSS！

Question

我正在寻找一种仅使用CSS的解决方案，将图像缩小到浏览器窗口的大小- X像素。我发现了很多JavaScript的解决方案，但我想要一个仅使用CSS的方法。这是否可行？如果是，怎么做？

- Ca-La

---

这个有什么问题？（http://jsfiddle.net/bqbGY/） - thirtydot

将其放入一个具有200px右边距的容器中应该是正确的方法。 - Pekka

为什么一定要是纯CSS的解决方案？ - Loktar

@Pekka，“200px”是从哪里来的？ - MrWhite

@Pekka 噢，好的...减少 x 个像素的大小？原始问题似乎表明需要浏览器窗口的实际宽度（以像素为单位）-仅使用CSS不可能。我认为唯一的解决方案应该包括 width:100% 如果要将图像缩小“到浏览器窗口的大小”？任何额外的边距都会导致图像比浏览器窗口小？嗯，OP有什么话要说吗...？ - MrWhite

Answer 1

这个怎么样？

演示

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%
}

- thirtydot

---

为什么要使用 position: absolute？不应该必要的。margin-right: 100px 不起作用吗？ - Pekka

对我来说可以用：http://jsfiddle.net/mXSTQ/1/（编辑：嗯，几乎可以，如果宽度低于100像素，图像似乎会重置为原始大小。也许需要更多的微调。） - Pekka

@thirty 你的解决方案在非常小的尺寸下表现更好。缩小浏览器窗口会显示差异。 - Pekka

我的另一个优点是，背景已经在“stuff”后面了：http://jsfiddle.net/mXSTQ/3/ - thirtydot

@Pekka 你已经微调好了吗？在 Firefox（Win）中，它似乎在100px以下的范围内运行良好。 - MrWhite

Answer 2

img {
    width: 100%;
}

塔达!! :)

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

编辑:

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

的边距属性为x像素。 显然，这意味着要将img放在div中。 就像这样：

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

再次编辑：请注意，您可以使用单独的margin-left和margin-right属性，而不是使用margin属性。 :)

- McKayla

---

你漏掉了“-X”像素的部分。 - david

@david：什么部分？编辑：算了，我看到了。在原始问题中。 - thirtydot

我同意缺少-x像素的问题，但由于它必须是纯CSS解决方案，我认为这是最好的选择。原始发布者只需将其更改为98％，45％等即可。 - Loktar

我误解了那个意思。我会回来的，带着一个包含它的第二个答案。 - McKayla

@Loktar，“98%”绝不等于“（100％-定义数量的像素）”，这相差甚远。 - Pekka