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

Question

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

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

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

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

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

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

Answer 1

将图像设置为 div 的背景并使用 background-size:cover;。这将在不丢失宽高比的情况下将其拉伸(stretch)到全屏，无论图像尺寸是多少。