如何调整缩小轮播（carousel）内的图片尺寸以适配容器展示

问题根因 #

你当前的轮播Slide容器同时配置了背景图属性，又在容器内部嵌套了<img>标签，实际页面渲染时显示的是未做尺寸限制的原生img元素，你为背景图设置的background-size等适配属性不会作用于这个独立的img标签，这是图片显示过大的核心原因。

可行解决方案（二选一即可） #

方案1：直接使用背景图展示（改动最小，推荐） #

你已经为每个slide元素配置了对应的背景图、缩放规则、居中属性，直接删除HTML中每个slide容器内的img标签即可，为了保证无障碍访问，可以给slide容器补充语义属性：
修改前的代码：

<div class="slide-1"><img src="img/AudiA3.jpg" alt="Audi A3"></div>

修改后的代码：

<div class="slide-1" role="img" aria-label="Audi A3"></div>

所有11个slide容器都按照上述规则修改即可。

方案2：保留img标签，新增样式限制尺寸 #

如果你需要保留img标签的写法，可以在你的CSS文件中新增如下规则：

/* 限制轮播主图尺寸适配容器 */
#thumbnail-preview-indicators .slides [class^="slide-"] img {
  width: 100%;
  height: 100%;
  /* 适配规则二选一：contain为完整显示图片保持比例，cover为铺满容器裁剪超出部分 */
  object-fit: contain;
  object-position: center;
}

可选优化 #

你当前CSS中重复书写了11个slide的选择器，可以简化为通用匹配规则减少代码冗余：
把原来所有写.slide-1, .slide-2 ... .slide-11的选择器，替换为#thumbnail-preview-indicators .slides [class^="slide-"]即可，该规则会匹配所有class以slide-开头的元素。

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