如何让轮播图背景图固定于父容器且不拉伸、不随页面滚动？

方法一：使用背景图片实现 #

• 给轮播项容器设置以下CSS：

  .slide-item {
    background: url('你的图片地址') center center no-repeat;
    background-size: contain; /* 保持图片比例，完整显示，容器有留白 */
    /* 若想填满容器且不拉伸（会裁剪部分图片），改用 background-size: cover; */
    background-attachment: scroll; /* 固定为scroll，避免随页面滚动 */
    width: 100%;
    height: 300px; /* 按需设置轮播高度 */
  }
  

• 这样设置后，图片会始终居中，容器宽度变化时只会按比例缩放，不会拉伸变形，也不会随页面滚动移动。

方法二：使用标签实现 #

• 给轮播容器添加布局控制，图片设置自适应规则：

  <div class="slide-container">
    <img src="你的图片地址" alt="轮播图">
  </div>
  

  .slide-container {
    width: 100%;
    height: 300px; /* 固定轮播高度 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slide-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持比例完整显示，可选cover填满容器 */
  }
  

• object-fit: contain会让图片按原始比例缩放，完整显示在容器内并居中；如果需要图片填满容器且不拉伸，换成object-fit: cover，此时图片会裁剪超出部分，但比例不变。

注意：如果你的轮播组件有动态高度需求，可以把固定高度换成自适应的百分比或使用flex布局来控制容器尺寸，确保图片的缩放基准正确。

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