Owl Carousel轮播图移动端被放大裁剪，如何调整实现图片完整展示

• 你当前CSS中设置了background-size: cover，该属性会等比拉伸背景图直到完全覆盖容器，移动端容器宽高比和原图差异较大时，图片就会被裁切，仅显示局部区域
• 固定min-height: 730px的设置在移动端窄屏场景下，容器高度远大于适配宽度下的图片正常高度，进一步放大了裁切问题

仅需新增移动端媒体查询适配规则，保留桌面端原有显示效果，修改后的完整CSS如下：

.home-slider{position: relative;}
.home-slider,
.home-slider .owl-stage-outer,
.home-slider .owl-stage-outer .owl-stage,
.home-slider .owl-stage-outer .owl-stage .owl-item,
.home-slider .owl-stage-outer .owl-stage .owl-item .item{height: 100%;}
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
    position: relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    margin-bottom: 20px;
    min-height: 730px;
}
/* 移动端适配规则，767px为移动端断点，可根据实际需求调整 */
@media (max-width: 767px) {
    .home-slider .owl-stage-outer .owl-stage .owl-item .item{
        /* 背景图等比缩放至完全显示在容器内，不裁切 */
        background-size: contain;
        /* 取消固定高度，改为按原图宽高比自适应高度 */
        min-height: auto;
        height: 0;
        /* 数值计算方式：图片原始高度/图片原始宽度 * 100%，示例为1920*730尺寸图片的计算结果，可替换为你的实际图片比例 */
        padding-top: 38.02%;
    }
}

如果不希望移动端图片上下出现留白，可将background-size: contain替换为background-size: 100% 100%，但该设置会导致图片被拉伸变形，优先推荐使用contain方案。

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