如何使用 CSS 拉伸图像以适应屏幕并保持纵横比？

Posted 2023-02-25

【中文标题】如何使用 CSS 拉伸图像以适应屏幕并保持纵横比？

【英文标题】：How to stretch an image to fit screen and maintain aspect ratio using CSS?

【发布时间】：2014-04-28 14:31:12

【问题描述】：

在此处查看我的示例 - http://jsbin.com/kutobedo/1/edit

当您缩小浏览器窗口时，图像会正确调整大小并保持其纵横比。但是，我希望图像始终拉伸以填满屏幕，但在这种情况下，它永远不会超出其原始分辨率。

如果我设置宽度：100% 而不是最大宽度。它会拉伸图像以适应宽度，但如果垂直缩小窗口，它将开始扭曲图像。

如果我设置 height: 100% 而不是 max-height 我会得到溢出/滚动条。

所以我有点卡住了！请注意，图像将具有不同的纵横比和分辨率。

我想从长远来看，这可能不是一个好主意，因为在 4k 屏幕上放大的 1024x768 图像可能看起来有点讨厌。不过现在仍然想要一个解决方案。

【问题讨论】：

我在这里（基本上）问过这个问题：***.com/questions/10142491/…

这个？ jsbin.com/kutobedo/4/edit

嗨，比利，在您的解决方案中，如果您开始垂直调整窗口大小，它将溢出而不是调整图像大小。

【参考方案1】：

将图像设置为 div 的背景并使用 background-size:cover;。无论图像尺寸是多少，这都会将其拉伸到全屏而不会丢失纵横比。

【讨论】：

图片需要动态添加，你认为我应该将图片设置为背景作为内联样式吗？

【参考方案2】：

使用 »cover« 属性，图像被放大到整个背景，直到整个背景被覆盖。更多http://en.aufdemdach.org/css-en/css-center-background-images/

例子：

body
   background: url("http://lorempixel.com/g/1000/1000/") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;