如何在CSS中的响应式网站中拉伸和成像

我在幻灯片放映中有一系列图像，它们都以不同的图像尺寸上传，我希望实质上使所有图像遵循一条规则，与最大宽度成比例，这样如果您调整浏览器窗口大小，它们仍然会保持其流畅的大小调整响应。如何在CSS中的响应式网站中拉伸和成像

Here是网站模板和有问题的图片。

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

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

2015-08-03 Andrew M

可能重复的[图像调整大小，以适应屏幕]（http://stackoverflow.com/questions/2569192/image-resize-to-fit-screen） –

可能重复：http://stackoverflow.com/questions/ 2569192 /图像调整大小适合屏幕 –

这可能会帮助你：http://stackoverflow.com/questions/31336306/standardize-image-into-div/31336568#31336568 - 真的有这个问题的基调如果你尝试搜索的话。 – Doidgey

解决此问题的关键是使用背景图像及其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转换来控制幻灯片之间的幻灯片移动。

来源

2015-08-03 10:21:38

感谢亨利，我会放手让你知道。 –

如何在CSS中的响应式网站中拉伸和成像

回答

相关问题