CSS中如何讓圖片全屏顯示

在CSS中，您可以通過設(shè)置圖片的寬度和高度為100%來實(shí)現(xiàn)圖片的全屏顯示，這將使圖片占據(jù)其所在容器的全部空間，從而實(shí)現(xiàn)全屏顯示的效果。

以下是一個示例代碼：

HTML代碼：

<div class="image-container">
  <img src="image.jpg" alt="示例圖片">
</div>

CSS代碼：

.image-container {
  width: 100%;
  height: 100%;
}
.image-container img {
  width: 100%;
  height: 100%;
}

在上面的代碼中，我們首先將.image-container的寬度和高度設(shè)置為100%，這將使其占據(jù)整個屏幕空間，我們將.image-container img的寬度和高度也設(shè)置為100%，這將使圖片占據(jù)其所在容器的全部空間，從而實(shí)現(xiàn)全屏顯示的效果。

如果圖片本身的比例與容器不匹配，那么圖片可能會被拉伸或壓縮以填充容器，如果您希望保持圖片的比例不變，那么您可能需要使用其他CSS技巧來實(shí)現(xiàn)這一點(diǎn)，例如使用object-fit屬性來保持圖片的原始比例。