当图像大小不同时，如何在轮播中制作响应式图像？

Question

我的一个页面中的图片有问题。它们在轮播中，但是随着轮播滑动到下一张图像，它会不断改变大小，因为图像的大小不同。我试图将它们全部设置为相同的尺寸，但这似乎并不重要，它们仍然是不同的尺寸。我需要做些什么才能使它们具有相同的大小，以便轮播在每张幻灯片中保持一致？

Answer 1

使用aspect-ratio

所以，你可以忽略下面sn-p中的JavaScript和HTML。

在 CSS 中，我为我的所有图像分配了固定的 width 或 150px，并为我的所有图像分配了一个 1:1 aspect-ratio（因为我知道我所有的图像都是方形的）。

把aspect-ratio代码注释掉就可以看出区别了。

let
  currImg = 0,
  totalImgs = 4;

const
  container = document.getElementById("container"),
  leftBtn = document.getElementById("left-btn"),
  rightBtn = document.getElementById("right-btn"),
  nav = (delta) => {
    container.children[currImg].classList.remove("show")
    currImg = (currImg + totalImgs + delta) % totalImgs
    container.children[currImg].classList.add("show")
  },
  navLeft = () => nav(-1),
  navRight = () => nav(1)

leftBtn.addEventListener("click", navLeft)
rightBtn.addEventListener("click", navRight)

img {
  width: 150px;
  aspect-ratio: 1/1;
  display: none;
  margin-bottom: 0.5rem;
}

.show {
  display: block;
}

<div id="container">
  <img src="https://placekitten.com/200/200" class="show" />
  <img src="https://placekitten.com/300/300" />
  <img src="https://placekitten.com/500/500" />
  <img src="https://placekitten.com/600/600" />
</div>
<button id="left-btn">Left</button>
<button id="right-btn">Right</button>