Responsive Slider适配问题：笔记本端裁切及移动端图片切换需求

一、确保图片始终完整显示在屏幕内 #

原代码给.item-slider.object-fit设置固定高度，导致图片比例与容器高度冲突，出现裁切问题。调整方案如下：

修改后的CSS #

.item-slider.object-fit {
  width: 100%;
  overflow: hidden;
}

.img-slide {
  width: 100%;
}

.img-native-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.img-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 强制图片完整显示，保留原始比例，不裁切 */
  object-fit: contain;
  /* 可选：图片比例与容器不符时，填充背景色优化视觉 */
  background-color: #ffffff;
}

/* 仅针对内容区块做响应式调整，不再固定滑块高度 */
@media screen and (min-width: 768px) {
  .block-content {
    padding: 2rem 0;
  }
}

@media screen and (min-width: 992px) {
  .block-content {
    padding: 3rem 0;
  }
}

@media screen and (min-width: 1200px) {
  .block-content {
    padding: 4rem 0;
  }
}

核心说明 #

• 移除滑块容器的固定高度，让容器由.img-native-wrap的padding-bottom比例控制高度，匹配图片原始比例
• 使用object-fit: contain保证图片完整显示，不会被裁切
• 若图片比例与容器比例不一致，会自动在两侧/上下留空白，可通过背景色优化

二、移动端自动更换图片 #

使用HTML5原生<picture>标签，根据屏幕尺寸加载对应图片，无需额外JS：

修改后的HTML示例（所有滑块同理修改） #

<div class="item-slider object-fit">
  <div class="img-slide">
    <span class="img-native-wrap" style="padding-bottom: 22.396%;">
      <picture>
        <!-- 移动端（小于768px）加载专用图 -->
        <source media="(max-width: 767px)" srcset="{{media url='wysiwyg/slider/bn4-mobile.jpg'}}">
        <!-- 默认加载桌面端原图 -->
        <img class="img-fluid" src="{{media url='wysiwyg/slider/bn4.jpg'}}" alt="" width="1920" height="626" loading="lazy">
      </picture>
    </span>
  </div>
  <!-- 内容区块保持不变 -->
  <div class="container">
    <div class="block-content">
      <div class="block-center">
        <h1 class="text-large center animated fadeInDownSlide delay-0s5"><strong><span font="open sans" style="color: #000;"><span>DANAS 40%</span></span><span><br><span style="color: #ffaa39;">SUTRA 39%</span></span></strong></h1>
        <div class="text-normal animated fadeInDownSlide delay-1s"></div>
        <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Poruči sada</span></a></div>
      </div>
    </div>
  </div>
</div>

核心说明 #

• <picture>标签通过media条件自动匹配加载对应图片
• 需提前准备移动端专用图片（尺寸、比例适配手机屏幕），替换示例中的bn4-mobile.jpg路径
• 原生方案性能优异，无需依赖外部脚本

完整整合代码 #

CSS #

.item-slider.object-fit {
  width: 100%;
  overflow: hidden;
}

.img-slide {
  width: 100%;
}

.img-native-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.img-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #ffffff;
}

@media screen and (min-width: 768px) {
  .block-content {
    padding: 2rem 0;
  }
}

@media screen and (min-width: 992px) {
  .block-content {
    padding: 3rem 0;
  }
}

@media screen and (min-width: 1200px) {
  .block-content {
    padding: 4rem 0;
  }
}

HTML #

<div class="item-slider object-fit">
  <div class="img-slide">
    <span class="img-native-wrap" style="padding-bottom: 22.396%;">
      <picture>
        <source media="(max-width: 767px)" srcset="{{media url='wysiwyg/slider/bn4-mobile.jpg'}}">
        <img class="img-fluid" src="{{media url='wysiwyg/slider/bn4.jpg'}}" alt="" width="1920" height="626" loading="lazy">
      </picture>
    </span>
  </div>
  <div class="container">
    <div class="block-content">
      <div class="block-center">
        <h1 class="text-large center animated fadeInDownSlide delay-0s5"><strong><span font="open sans" style="color: #000;"><span>DANAS 40%</span></span><span><br><span style="color: #ffaa39;">SUTRA 39%</span></span></strong></h1>
        <div class="text-normal animated fadeInDownSlide delay-1s"></div>
        <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Poruči sada</span></a></div>
      </div>
    </div>
  </div>
</div>

<div class="item-slider object-fit">
  <div class="img-slide">
    <span class="img-native-wrap" style="padding-bottom: 22.396%;">
      <picture>
        <source media="(max-width: 767px)" srcset="{{media url='wysiwyg/slider/bn6-mobile.jpg'}}">
        <img class="img-fluid" src="{{media url='wysiwyg/slider/bn6.jpg'}}" alt="" width="1920" height="626" loading="lazy">
      </picture>
    </span>
  </div>
  <div class="container">
    <div class="block-content">
      <div class="block-center">
        <p class="text-small animated fadeInDownSlide" style="color: #0099cc;">Ograničena serija</p>
        <h2 class="text-large animated fadeInDownSlide delay-0s5" style="color: #000000;"><strong><span style="color: #000;">SKANDINAVSKA KOLEKCIJA</span><br><span style="color: #ffaa39;">ZA TVOJU SPAVAĆU SOBU</span></strong></h2>
        <div class="text-normal animated fadeInDownSlide delay-1s" style="color: #000000;">
          <div>ZA SAMO</div>
          <p>RSD9.999,00</p>
        </div>
        <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="action primary" href="#">PORUČI SADA</a></div>
      </div>
    </div>
  </div>
</div>

<div class="item-slider object-fit">
  <div class="img-slide">
    <span class="img-native-wrap" style="padding-bottom: 32.6%;">
      <picture>
        <source media="(max-width: 767px)" srcset="{{media url='wysiwyg/slider/Baner01-mobile.jpg'}}">
        <img class="img-fluid" src="{{media url='wysiwyg/slider/Baner01.jpg'}}" alt="" width="1920" height="626" loading="lazy">
      </picture>
    </span>
  </div>
</div>

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