我试图让图像在屏幕上居中，并且我希望它水平拉伸(stretch)。 这里的技巧是我需要设置边距。让我们以 200px 为例。
无论窗口大小如何，图像都需要水平拉伸(stretch)(并可能按比例缩放)以保持这些边距。
我可以将它居中，也可以拉伸(stretch)它，但出于某种原因我不能同时进行这两项操作。
另外，这只能是 CSS!没有 JS。
非常感谢任何帮助! :D
附言我见过很多关于使用窗口大小缩放图像的问题，这不是一回事。我需要设置边距(以像素为单位)保持不变，而它们之间的图像水平拉伸(stretch)。
最佳答案
我在图像周围放置了一个容器，以保留边距。随着窗口宽度的变化，边距保持不变——只有 .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>
关于html - 根据设置的像素边距，使用窗口调整图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11786373/