[英]is there code to automatically resize an image based on predetermined pixel width?
[英]Image resize with window, based on set pixel margins?
我试图使图像居中放置在屏幕上,并且希望它水平伸展。 这里的窍门是我需要设置边距。 让我们以200px为例。
无论窗口大小如何,图像都需要水平拉伸(并可能按比例缩放)以保持这些边距。
我可以将它居中,也可以拉伸它,但是由于某种原因我不能一次做两个。
另外,这只需要CSS! 没有JS。
任何帮助是极大的赞赏! :D
PS我已经看到了很多有关按窗口大小缩放图像的问题,但这不是一回事。 我需要设置不变的边距(以像素为单位),而它们之间的图像水平延伸。
我在图像周围放了一个容器,可以保留边距。 当窗口的宽度改变时,边距保持不变-仅.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>
您可以使用两个div,外部设置边距,内部设置宽度为100%:
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
一种方法是将图像放在div中,然后在div上添加填充。
您可以将img设置为100%的宽度和自动高度,然后在包含的div上添加填充。
这是一个例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.