Question

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

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

如果我设置宽度：100％而不是max-width。它将拉伸图像以适应宽度，但如果您垂直缩小窗口，它将开始扭曲图像。

如果我设置高度：100％而不是max-height，我会得到溢出/滚动条。

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

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

Answer 1

将图像设置为div＆amp;的背景。使用background-size:cover;。这将拉伸它以填充屏幕而不会丢失纵横比，无论图像尺寸是什么。

Answer 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;
}

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

2 个答案: