css 图片一屏显示

CSS 图片一屏显示是一种常用的网页设计技巧，特别是在移动设备上。下面就来介绍一下如何实现这种效果。

.img-container {
  height: 100vh; /* 设置容器的高度为屏幕高度 */
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.img-container img {
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  max-height: 100%; /* 图片最大高度为容器高度 */
}

以上是实现 CSS 图片一屏显示的基本代码。首先，我们需要一个容器来包裹图片，设置其高度为屏幕高度，以便图片能够一屏显示。然后，使用弹性布局（flex）来实现水平居中和垂直居中的效果。接着，设置图片的最大宽度和最大高度为容器的宽度和高度，以便图片在缩放时保持比例。

需要注意的是，如果图片本身比容器的尺寸还要小，那么可以通过设置图片的 min-width 和 min-height 属性来使其填充整个容器。

总之，使用 CSS 图片一屏显示技巧能够使网页更加美观，适应不同的设备屏幕大小。