Html 根据设置的像素边距，使用窗口调整图像大小？

我试图在屏幕上获得一个居中的图像，我希望它水平伸展。 这里的诀窍是我需要设置边距。让我们以200px为例

无论窗口大小如何，图像都需要水平拉伸（可能按比例缩放）以保持这些边距

我可以居中，也可以伸展，但由于某些原因，我不能同时做这两件事

此外，这需要是CSS只！没有JS

非常感谢您的帮助！：D

---

另外，我已经看到了很多关于用窗口大小缩放图像的问题，这不是一回事。我需要设置边距，以像素为单位，保持不变，同时它们之间的图像水平延伸。

您可以使用两个div，外部设置边距，内部设置宽度为100%：

​
#持有者{
背景：#333；
高度：100px；
利润率：0.100px；
}
#持有人分部{
宽度：100%；
}
​

一种方法是将图像放在div中，然后在div中添加填充

您可以将img设置为100%宽度和自动高度，然后在包含的div上添加填充

这里有一个例子

---

我在图像周围放了一个容器，这样可以保留边距。当窗口的宽度改变时，边距保持不变-只有

.container

的宽度改变。通过将容器内图像的宽度设置为100%，整个图像将根据容器的宽度进行缩放（成比例）：

CSS:

HTML:

---

CSS不支持动态页边距。您很可能需要使用Javascript来实现这一点。嗯，没有？动态意味着不能根据窗口大小的变化来更改边距。

<div id="holder">
    <div></div>
</div>​

#holder {
    background: #333;
    height: 100px;
    margin: 0 100px;
}
#holder div {
        width: 100%;

}
​

.container {
    margin: 0 200px;
    background: red;
}

.container img {
    width: 100%;
}

<div class="container">
    <img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>