liqian
ba79dc6178
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 2s
28 lines
746 B
CSS
28 lines
746 B
CSS
/* 轮播容器 - 核心：基于视口高度自适应 */
|
||
.auto-swiper-container {
|
||
width: 100%;
|
||
/* 关键：高度 = 视口高度的百分比（可调整，如60vh=屏幕高度60%） */
|
||
/* height: 60vh; */
|
||
/* max-height: 800px;
|
||
min-height: 300px; */
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 轮播项 - 填充容器高度 */
|
||
.auto-swiper-slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 图片自适应核心：填充屏幕比例高度，保持比例 */
|
||
.auto-swiper-slide img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 优先填充容器，裁剪超出部分（无拉伸） */
|
||
/* object-fit: contain; 可选：完整显示图片，不裁剪（可能留黑边） */
|
||
display: block;
|
||
}
|