CSS

Question

如何让图像填满整个屏幕（请注意它下面有东西 - 将其视为填满整个屏幕的页面中的 header）但保持其纵横比，要么宽度溢出或高度溢出。

我以为会是：

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

但这不起作用。长宽比不对。

Answer 1

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

Answer 2

基本上你可以使用

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

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

希望对您有所帮助:)

CSS - 图片全屏，但会保持纵横比

CSS - Image Full Screen, but will maintain aspect ratio

html

aspect-ratio