如何为HTML/CSS图片Slider添加自动裁剪（含圆角）适配侧边栏

针对不同宽高比图片导致Slider显示混乱的问题，我们可以通过固定Slider容器尺寸+图片比例裁剪的方式解决，同时轻松实现圆角效果。以下是修改后的完整代码：

<head>
<style type="text/css">
/* 固定Slider容器尺寸，适配侧边栏，可根据实际需求调整 */
#slider {
    overflow: hidden;
    width: 300px; /* 侧边栏宽度，按需修改 */
    height: 200px; /* 自定义Slider高度，按需修改 */
    border-radius: 8px; /* 整体容器圆角，可选 */
}

#slider figure {
    position: relative;
    width: 500%; /* 5张图片，每张占100%容器宽度，总宽度为5*100% */
    height: 100%; /* 和Slider容器高度保持一致 */
    margin: 0;
    left: 0;
    animation: 20s slider infinite;
}

/* 统一图片尺寸，实现自适应裁剪 */
#slider figure img {
    float: left;
    width: 20%; /* 5张图片均分figure宽度，对应Slider的100%宽度 */
    height: 100%; /* 填满Slider容器高度 */
    object-fit: cover; /* 核心属性：按比例裁剪图片，填充容器，避免变形 */
    border-radius: 8px; /* 单张图片圆角，可选 */
}

@keyframes slider {
    0% { left: 0; }
    20% { left: 0; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
</style>
</head>
<body>
    <div id="slider">
        <figure>
            <img src="img/plant.png">
            <img src="img/plant2.png">
            <img src="img/plant3.png">
            <img src="img/plant4.png">
            <img src="img/plant.png">
        </figure>
    </div>
</body>
</html>

关键修改说明： #

• 固定容器尺寸：给#slider设置明确的宽高，匹配侧边栏大小，从根源避免图片尺寸混乱。
• object-fit: cover：强制图片按自身比例填充容器，超出部分自动裁剪，保证图片不变形且始终填满Slider。
• 圆角效果：通过border-radius可给整个Slider容器或单张图片添加圆角，数值越大圆角弧度越明显。
• 高度同步：让#slider figure的高度与容器一致，避免出现空白区域。

如果需要适配不同宽度的侧边栏，只需修改#slider的width值即可，图片会自动适配裁剪。

内容的提问来源于stack exchange，提问作者5percent