我正在制作一個旋轉木馬/滑塊，并希望圖像居中。當我使用背景-位置:中心；當我改變寬度時，它們會被拉長。當改變寬度時，不知道如何使圖像居中并且不拉伸它們。

我發現如果我用后臺-附件:固定；和背景-位置:中心；它看起來像我想要的。但是圖片會隨著頁面滾動。我該如何解決這個問題？

這是我的筆

const images = [
  "https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
  "https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
];
var currentImgIndex = 0;
var futureImgIndex = 1;

function switchBackground() {
  $('.current').toggleClass('shrink'); // slide the image to the left

  setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
    currentImgIndex = (currentImgIndex + 1) % images.length;
    futureImgIndex = (futureImgIndex + 1) % images.length;

    $('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
    $('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');

    $('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
  }, 600); // image switch is delayed 600ms because the sliding animation takes that long
}

setInterval(switchBackground, 4000);

.carousel {
  position: relative;
  width: 50rem;
  height: 50rem;
  margin-top: 12.5vh;
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  margin-bottom: 200vh;
}

.slide {
  background-repeat: no-repeat;
  
  background-attachment: fixed; 
  background-position: center;
  /*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */

  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.current {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
}

.current.shrink {
  width: 0;
  transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}

.future {
  background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
}

<center>
  <div class="carousel">
    <div class="slide future"></div>
    <div class="slide current"></div>
  </div>
</center>

試試后臺-附件:滾動；：

JSFiddle