首页 文章

CSS - 图像全屏，但会保持宽高比

提问于
浏览 次
0

我如何获得一个图像来填满整个屏幕（注意它下面有东西 - 把它想象成填满整个屏幕的页面中的 Headers ）但保持其纵横比，要么是宽度过大，要么是高度过高 .

我以为会是：

<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" />

但这不起作用 . 宽高比失败 .

html css aspect-ratio

2 回答

  • 1

    将其作为背景插入到元素中，使用 background-size: cover; 和 height: 100vh 元素 .

    回复于
  • 0

    基本上你可以使用

    background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
min-width: 100vh;

    http://codepen.io/powaznypowazny/pen/apeVXg

    希望能帮助到你 ：）

    回复于

相关问题