哪个CSS样式能让图片充满屏幕？
当我们在设计网页时，往往需要在页面中使用图片来提高页面的美观性和可读性。但是，很多时候我们会遇到图片大小与页面大小不一致的情况。此时，我们需要使用CSS样式来让图片充满整个屏幕。本文将介绍几种能让图片充满屏幕的CSS样式。
1. object-fit
这是一个用于调整图片尺寸和宽高比的CSS属性。可以设置为以下值：
fill：拉伸图片以适应容器。
contain：缩放图片以适应容器，同时保持图像比例。
cover：缩放图片以填充容器，同时保持图像比例。可能会不能完全填充容器。
none：保留原始的图像尺寸。
scale-down：缩小图像，以适应容器，如果比 contain 还要小则表现如同 none。
下面是一个例子，使用 object-fit 属性让图片充满容器：
img {
width: 100%;
height: 100%;
object-fit: cover;
}
在这个例子中，img 元素的宽度和高度都设置为 100%，然后使用 object-fit 将图片缩放以填充整个容器。
2. background-size
另一种让图片充满整个容器的方式是使用 background-size 属性。
div {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}
在这个例子中，我们将一个背景图像设置为一个 <div> 元素的背景。然后，我们使用 background-size: cover 将背景图像缩放到覆盖整个元素。我们还将背景图像垂直和水平居中，使用了 background-position: center。
3. width 和 height 属性
最后，我们可以通过简单的设置图像的宽度和高度来让它充满整个容器。
img {
display: block;
width: 100%;
height: 100%;
}
在这个例子中，我们将 img 元素的宽度和高度设置为 100%，以将其调整到容器的大小。我们还使用 display: block 确保图片占据整个容器。
总结
无论您选择使用 object-fit、background-size 还是 width 和 height 属性，您都可以使用 CSS 来让图片充满整个容器。这样做可以提高页面的美观性和可读性，为您提供更好的用户体验。