如何在100%屏宽35vh高容器中展示不同尺寸图片（不缩放显中心）

问题分析 #

你当前的代码已用到object-fit: cover和object-position: center这类核心属性，但因为图片父容器.slides样式缺失、轮播图显示逻辑分散，导致图片未按预期填充容器并居中展示。

修复后的完整代码 #

HTML部分（仅调整初始轮播图的类名关联） #

<!-- IMG SLIDESHOW + TEXT BOX -->
<div class="slider">
  <div class="slides">
    <img class="slide displaySlide" src="img/beeldmateriaal/gasuniegebouw.jpg" alt="Gasunie Gebouw">
    <img class="slide" src="img/beeldmateriaal/keukens_appingedam.jpg" alt="Keukens Appingedam">
    <img class="slide" src="img/beeldmateriaal/fraeylemaborg_slochteren.jpg" alt="fraeylemaborg slochteren">
  </div>
  <button class="prev" onclick="prevSlide()">&#10094;</button>
  <button class="next" onclick="nextSlide()">&#10095;</button>
</div>

SCSS部分（关键修改与优化） #

.slider {
  position: relative;
  width: 100%;
  height: 35vh;
  margin: auto;
  overflow: hidden;

  .slides {
    width: 100%;
    height: 100%;
    // 确保父容器填满轮播框，限制图片显示范围
  }

  .slide {
    width: 100%;
    height: 100%;
    display: none; // 默认隐藏所有轮播图
    object-fit: cover; // 按比例填充容器，超出部分自动裁剪
    object-position: center; // 始终保留图片中心区域
  }

  .slide.displaySlide {
    display: block; // 仅当前轮播图显示
  }
}

// 可选：为按钮添加基础样式，避免遮挡图片
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  z-index: 10;
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

核心修改说明 #

1. 补全.slides容器样式：让它的宽高与.slider完全匹配，确保图片的尺寸限制基于35vh的目标容器，避免布局不受控。
2. 统一轮播图显示逻辑：将displaySlide类与.slide绑定，默认所有轮播图隐藏，仅当前轮播图显示，避免全局样式冲突。
3. 保留核心属性作用：object-fit: cover保证图片按比例填充容器，不会拉伸变形；object-position: center确保裁剪时始终保留图片中心区域，解决不同高度图片的适配问题。

效果验证 #

• 所有图片将填满100%宽、35vh高的容器，无拉伸变形。
• 无论原始图片高度差异（958/960/983px），都会自动裁剪上下冗余部分，仅展示中心区域。
• 非当前轮播图完全隐藏，不会干扰布局。

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