如何在 CSS 中的响应式网站中拉伸和图像答案

【问题标题】：How to stretch and image in a responsive website in CSS如何在 CSS 中的响应式网站中拉伸和图像
【发布时间】：2015-08-03 19:47:14
【问题描述】：

我在幻灯片放映中有一系列图像，它们都以不同的图像尺寸上传，我想基本上让所有图像都遵循一个规则，即它们与最大宽度成比例地拉伸，这样如果你调整大小浏览器窗口，他们仍然会保持流畅的调整大小响应。

Here 是网站模板和相关图像。

如果可能的话，我希望能够在 CSS 中做到这一点。

我无法拉伸小图像以适应更大的容器，而不是尝试在小容器中包含大图像。通常，较小的图像在达到其实际像素暗淡时会停止调整大小，我希望它们继续按比例拉伸，即使这会使它们像素化。

【问题讨论】：

Image resize to fit screen的可能重复
可能重复：stackoverflow.com/questions/2569192/image-resize-to-fit-screen
这可能会对您有所帮助：stackoverflow.com/questions/31336306/standardize-image-into-div/… — 如果您尝试搜索，这件事上确实会有很多问题。
感谢 Mat 和 Marcos，我将重新审视这些解决方案。

标签： css slideshow image-resizing autoresize

【解决方案1】：

解决这个问题的关键是使用背景图片及其 CSS 属性。与其将图像插入为<img> 标签，不如创建带有背景图像集的容器

<div class="slide" style="background-image: url(image1.jpg)"></div>

给这些容器一些样式，以便它们填满您的幻灯片区域。

position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;

然后您可以使用background-size: contain; 使图像位于使用纯 CSS 的容器中。它永远不会延伸到该区域之外，但会尽可能地填充它。还可以使用background-position: center; 并使用background-repeat: no-repeat; 关闭图像重复 - 然后您将拥有一个居中且尽可能大的图像。

完整的CSS如下：

position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat;

您将能够使用 CSS 过渡来控制幻灯片在幻灯片之间的移动方式。

【讨论】：

谢谢亨利，我会试一试告诉你的。