首页 文章

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

提问于
浏览 次
0

看看我的例子 - http://jsbin.com/kutobedo/1/edit

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

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

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

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

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

html css image css3

2 回答

  • 1

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

    回复于
  • 1

    利用属性“封面”，图像被放大到整个背景，直到整个背景被覆盖 . 更多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;
}
    回复于

相关问题