[分享]css3怎么让一个图片满屏

CSS3是一个强大的样式语言，它可以让我们轻松地为网页元素添加各种各样的特效。今天，我将向大家介绍如何使用CSS3让一张图片满屏。/ 首先，我们需要给图片设置样式 / img { width: 100...

CSS3是一个强大的样式语言，它可以让我们轻松地为网页元素添加各种各样的特效。今天，我将向大家介绍如何使用CSS3让一张图片满屏。

/* 首先，我们需要给图片设置样式 */
img {
    width: 100%; /* 设置宽度为100%，让图片充满整个屏幕 */
    height: auto; /* 高度自适应，保持图片比例不变 */
}

/* 接下来，我们需要给包含图片的父元素设置一些样式 */
.container {
    position: relative; /* 相对定位，让它成为图片的相对定位元素 */
    height: 100vh; /* 设置高度为视口高度，让它和图片一样高 */
    overflow: hidden; /* 隐藏容器内溢出部分 */
}

/* 为了让图片在居中的同时保持比例不变，我们需要在父元素的伪元素里设置一个绝对定位元素 */
.container:before {
    content: '; /* 伪元素内容为空 */
    display: block; /* 显示为块状元素 */
    width: 100%; /* 宽度为100% */
    padding-top: 75%; /* 计算出图片的高度占屏幕宽度的比例，设置顶部留白 */
}

/* 最后，我们把图片绝对定位于父元素的中心 */
img {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 向上偏移50% */
    left: 50%; /* 向左偏移50% */
    transform: translate(-50%, -50%); /* 使图片居中 */
} 

通过以上步骤，我们已经成功实现了让一张图片满屏的效果。如果你还有什么疑问，可以进一步了解CSS3的文档，或者向社区进行提问。