基于设置的像素边距，使用窗口调整图像大小？

我想要在屏幕上居中显示图像，并且我希望它水平拉伸。这里的诀窍是我需要设置边距。让我们以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

基于设置的像素边距，使用窗口调整图像大小？

回答

相关问题