當圖像大小不同時，如何在 carasoul 中制作響應式圖像？

Question

我的一個頁面中的圖像有一些問題。 它們在輪播中，但隨着輪播滑動到下一張圖像，它會不斷改變大小，因為圖像的大小不同。 我試圖將它們全部設置為相同的大小，但這似乎並不重要，它們仍然是不同的大小。 我需要做什么才能使它們具有相同的大小，以便輪播在每張幻燈片中保持一致？

Answer 1

使用aspect-ratio

因此，您可以忽略下面代碼段中的 JavaScript 和 HTML。

在150px中，我所做的是為我的所有圖像提供 150 像素的固定width和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>