根據設置的像素邊距，使用窗口調整圖像大小？

Question

我試圖使圖像居中放置在屏幕上，並且希望它水平伸展。 這里的竅門是我需要設置邊距。 讓我們以200px為例。

無論窗口大小如何，圖像都需要水平拉伸（並可能按比例縮放）以保持這些邊距。

我可以將它居中，也可以拉伸它，但是由於某種原因我不能一次做兩個。

另外，這只需要CSS！ 沒有JS。

任何幫助是極大的贊賞！ ：D

PS我已經看到了很多有關按窗口大小縮放圖像的問題，但這不是一回事。 我需要設置不變的邊距（以像素為單位），而它們之間的圖像水平延伸。

Answer 1

我在圖像周圍放了一個容器，可以保留邊距。 當窗口的寬度改變時，邊距保持不變-僅.container的寬度改變。 通過將容器內圖像的寬度設置為等於100％，將基於容器的寬度（按比例）縮放整個圖像：

CSS：

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

.container img {
    width: 100%;
}

HTML：

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

Answer 2

您可以使用兩個div，外部設置邊距，內部設置寬度為100％：

http://jsfiddle.net/tqmrY/4/

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

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

}
​

Answer 3

一種方法是將圖像放在div中，然后在div上添加填充。

您可以將img設置為100％的寬度和自動高度，然后在包含的div上添加填充。

這是一個例子

http://jsfiddle.net/uJnmf/