[英]Image resize with window, based on set pixel margins?
I'm trying to get an image centered on the screen, and I want it to stretch horizontally. 我试图使图像居中放置在屏幕上,并且希望它水平伸展。 The trick here is that I need set margins. 这里的窍门是我需要设置边距。 Lets use 200px as an example. 让我们以200px为例。
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size. 无论窗口大小如何,图像都需要水平拉伸(并可能按比例缩放)以保持这些边距。
I can center it, and I can stretch it, but I can't do both at once for some reason. 我可以将它居中,也可以拉伸它,但是由于某种原因我不能一次做两个。
Also, this needs to be CSS only! 另外,这只需要CSS! No JS. 没有JS。
Any help is greatly appreciated! 任何帮助是极大的赞赏! :D :D
PS I've seen ton of questions about scaling images with the window size, and this is not the same thing. PS我已经看到了很多有关按窗口大小缩放图像的问题,但这不是一回事。 I need set margins, in pixels, that stay constant, while the image between them stretches horizontally. 我需要设置不变的边距(以像素为单位),而它们之间的图像水平延伸。
I put a container around my image which would preserve the margins. 我在图像周围放了一个容器,可以保留边距。 As the window's width changes, the margin stays intact - only the width of the .container
is changed. 当窗口的宽度改变时,边距保持不变-仅.container
的宽度改变。 By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container: 通过将容器内图像的宽度设置为等于100%,将基于容器的宽度(按比例)缩放整个图像:
CSS: CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML: HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%: 您可以使用两个div,外部设置边距,内部设置宽度为100%:
http://jsfiddle.net/tqmrY/4/ http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div. 一种方法是将图像放在div中,然后在div上添加填充。
You would set your img to have a width of 100% and auto height, and then put padding on the containing div. 您可以将img设置为100%的宽度和自动高度,然后在包含的div上添加填充。
Here is an example 这是一个例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.