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

我想要在屏幕上居中顯示圖像，並且我希望它水平拉伸。這裏的訣竅是我需要設置邊距。讓我們以200px爲例。基於設置的像素邊距，使用窗口調整圖像大小？

圖像需要水平拉伸（可能按比例縮放）以保持這些邊距，而不管窗口大小。

我可以居中，我可以拉伸它，但由於某種原因，我不能同時做這兩件事。

此外，這隻需要CSS！沒有JS。

任何幫助非常感謝！：D

P.S.我已經看到很多關於使用窗口大小縮放圖像的問題，這不是同一回事。我需要以像素爲單位的邊緣保持不變，而它們之間的圖像水平延伸。

來源

2012-08-02 Senkou

CSS不支持動態頁邊空白。你很可能將不得不使用Javascript來實現這一點。 – 2012-08-02 21:57:43

http://www.w3schools.com/cssref/pr_margin.asp ummmmmm，不是？ – Senkou 2012-08-02 22:02:37

*動態*表示您無法更改邊距以響應窗口大小的更改。 – 2012-08-02 22:05:18

你可以使用兩個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%; 

}

來源

2012-08-02 22:02:02

它的工作！非常感謝！ – Senkou 2012-08-02 22:18:26

很高興工作。 – 2012-08-02 22:20:26

一種方法是把你的形象一個div，然後在div上填充。

您將設置您的img具有100％的寬度和自動高度，然後將填充放在包含div上。

下面是一個例子

http://jsfiddle.net/uJnmf/

來源

2012-08-02 22:03:55 illathruz

我把我的左右圖像的容器，這將保持利潤率。隨着窗口寬度的變化，邊距保持不變 - 只有.container的寬度發生變化。

CSS：

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

.container img { 
    width: 100%; 
}

HTML：

通過設置在容器內的圖像的寬度等於100％，整個圖像將基於容器的寬度來縮放（成比例地）

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

來源

2012-08-02 22:05:46 Tuanderful

它的工作！非常感謝！ – Senkou 2012-08-02 22:18:19

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

回答

相關問題