如何在Bootstrap 4+WordPress主题中实现轮播图图片缩放而非拉伸？

嘿，我明白你遇到的问题了——用Bootstrap 4做轮播图时，窗口缩放图片就拉伸变形，想让它按比例缩放而非强行填满容器对吧？你之前给<img>加的.cover类方向有点偏，因为background-*属性是给元素的背景图用的，但你这里是直接用<img>标签引入的图片，这些属性对它根本不起作用。咱们来调整一下：

方法1：用object-fit（推荐，现代浏览器友好） #

这是专门为图片、视频这类替换元素设计的属性，能完美实现“按比例填满容器，裁剪超出部分”的效果。

首先修改你的.cover类CSS：

.cover {
  width: 100%;
  height: 100%;
  /* 核心：保持图片比例，填满容器，超出部分自动裁剪 */
  object-fit: cover;
  /* 让图片居中显示，避免裁剪掉核心内容 */
  object-position: center center;
}

然后给轮播项设置固定高度，不然<img>没有参考高度还是会乱：

.carousel-item {
  /* 可以根据需求调整，比如用视口高度适配不同屏幕：height: 80vh; */
  height: 500px;
}

你的HTML代码不用改，还是原来的结构就行——<img class='cover' ...>就能直接生效。

方法2：改用背景图（兼容旧浏览器） #

如果需要支持IE这类不支持object-fit的旧浏览器，咱们可以把<img>换成带背景图的<div>，这样你原来的.cover类就能派上用场了：

修改后的HTML：

<div class="carousel-inner">
  <div class="carousel-item active cover" style="background-image: url('<?php echo get_theme_file_uri('/incl/1.jpg');?>');">
    <div class="carousel-caption">
      <h3>Voorbeeld 1</h3>
      <p>Voorbeeld beskrywing</p>
    </div>
  </div>
  <div class="carousel-item cover" style="background-image: url('<?php echo get_theme_file_uri('/incl/2.jpg');?>');">
    <div class="carousel-caption">
      <h3>Voorbeeld 2</h3>
      <p>Voorbeeld beskrywing</p>
    </div>
  </div>
  <div class="carousel-item cover" style="background-image: url('<?php echo get_theme_file_uri('/incl/3.jpg');?>');">
    <div class="carousel-caption">
      <h3>Voorbeeld 3</h3>
      <p>Voorbeeld beskrywing.</p>
    </div>
  </div>
</div>

然后保留你原来的.coverCSS，但要去掉background-attachment: fixed（不然轮播切换时图片会固定在视口，效果异常），同时给.carousel-item设置高度：

.carousel-item {
  height: 500px; /* 按需调整高度 */
}

.cover {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover;
}

两种方法都能解决图片拉伸的问题，选哪种看你的浏览器兼容性需求就行~

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