使用Owl-carousel时如何实现图片宽高随分辨率等比例缩放？

问题根源 #

你当前代码中为.gal-slide、.owl-item以及轮播图片都设置了350px固定高度，屏幕宽度缩小时容器宽度会被Owl Carousel自动压缩，但固定高度不会随之变化，因此出现比例失衡的问题。

调整方案 #

1. CSS样式修改（替换原有对应规则即可） #

.gallery-slider .gal-slide {
  /* 锁定宽高比为1:1，和你原有350*350的正方形比例一致 */
  aspect-ratio: 1/1;
  width: 100%;
  height: auto !important;
}
.gallery-slider .owl-stage {
  display: flex;
  align-items: flex-end;
  /* 将固定高度改为最小高度，适配不同尺寸下的内容高度 */
  min-height: 600px !important;
  height: auto !important;
}
.gallery-slider .owl-stage-outer {
  overflow: visible !important;
  min-height: 600px !important;
  height: auto !important;
}
.gallery-slider .owl-item {
  /* 取消固定高度 */
  height: auto;
  transition: 1.3s;
}
.gallery-slider .owl-item img {
  width: 100%;
  height: 100%;
  /* 避免图片拉伸变形，自动裁剪适配容器 */
  object-fit: cover;
  transition: 1.3s !important;
}

如果需要兼容不支持aspect-ratio属性的旧版浏览器，可以改用padding实现宽高比锁定，将.gal-slide的规则替换为以下内容：

.gallery-slider .gal-slide {
  position: relative;
  width: 100%;
  height: 0 !important;
  /* padding-top百分比等于宽度的100%，即可实现1:1宽高比 */
  padding-top: 100%;
}
.gallery-slider .gal-slide img {
  position: absolute;
  top: 0;
  left: 0;
}

2. JS配置调整 #

将Owl Carousel初始化配置中的autoHeight: true改为autoHeight: false，你已经通过CSS锁定了所有slide的统一宽高比，不需要插件自动计算高度，可避免出现高度跳动的异常问题。

修改完成后，轮播卡片会在任意屏幕宽度下保持1:1的等比缩放效果，图片也不会出现拉伸变形。

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