在 JavaScript 中将图像滑块调整为当前图像的纵横比答案

【问题标题】：Resize image slider to the current image's aspect ratio in JavaScript在 JavaScript 中将图像滑块调整为当前图像的纵横比
【发布时间】：2020-01-31 13:44:33
【问题描述】：

我制作了这个完全正常工作的图像滑块，我现在唯一想做的就是将其高度调整为当前图像的纵横比。我写了一个循环来计算滑块中每个图像的纵横比，唯一的问题是，在执行时，循环一次返回所有值，而我只需要它为adjustedHeight每个值一个接一个地给我点击。

我尝试将 i++ 放入循环中，将所有值推入一个数组，这需要另一个循环在数组的值之间进行迭代，但所有这些都比它需要的要复杂。

<div class="slider-images">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x960.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
</div>

JavaScript

const images = document.querySelector('.slider-images');
const image = document.querySelectorAll('.slider-images img');

var i;

function slideRight() {
    //...

    for (i = 0; i < image.length; i++) { // Calculates aspect ratio
        const allImagesWidth = image[i].naturalWidth, 
            allImagesHeight = image[i].naturalHeight;
        const aspectRatio = allImagesWidth / allImagesHeight;
        adjustedHeight = Math.round(slideWidth / aspectRatio); // Final slider height required for a current shown image
    }

    images.style.height = adjustedHeight + 'px'; // Dynamically should add respective height calculated in the loop above

    //...

}
document.querySelector('.slide-right').addEventListener('click', slideRight, false);

CSS

.slider-images {
    display: flex;
    transition: .5s all cubic-bezier(0.4, 0.0, 0.2, 1);
    max-width: 200%;
    max-height: 512px;
}

.slider-images img {
    width: 50%;
    z-index: -1;
}

【问题讨论】：

你不需要这样做，容器会根据包含的最高可见图像调整他的高度。您只能将 CSS 与 img{width: 100% ;高度：自动}
@Sim1-81 我知道，但是如果幻灯片中有不同的纵横比图像，目前图像会从侧面裁剪，我想通过调整容器大小来保持 100% 的图像可见图像休息。图像自动调整到slider-images容器，直到它们达到容器的最大宽度，当它们开始垂直裁剪时。为了以防万一，我将包含这些元素的 CSS。
如果图像被裁剪，则有一个父元素溢出：隐藏，如果是这样，请尝试删除该 css 行，否则您必须在文档上循环图像，准备存储到维度为的数组中任何图像，然后当您滑动时，您可以从该数组中选择当前图像的高度并将其应用于滑块。向容器添加一些过渡以平滑动画。然后，如果您从 slideRight() 函数中移出图像循环并将其放在一个单独的函数中，您可以调用此其他函数以将尺寸存储在 document.ready() 和 window.resize() 以添加响应行为
显然要执行上面解释的操作，您必须知道必须显示的下一张图像的索引

标签： javascript html slide

【解决方案1】：

终于解决了，可以根据需要垂直调整大小。只需将循环移到slideRight 函数上方，设置新的空数组变量imageArray、push 从循环到该数组的所有内容，然后在函数中设置样式以从该数组中读取并更改宽度在用于滑块工作的已存在变量 position = 0 上。

还对样式进行了调整，从.slider-images 中删除了max-height，并将.slider-images img 设置为max-height: unset;，以防您将img 默认设置为max-height: 100%;。

var position = 0;
var index = 0;
var imageArray = [];

//...

for (index; index < image.length; index++) {
    const allImagesWidth = image[index].naturalWidth, 
        allImagesHeight = image[index].naturalHeight;
    const aspectRatio = allImagesWidth / allImagesHeight;
    var adjustedHeight = slideWidth / aspectRatio;

    imageArray.push(adjustedHeight++);
}

images.style.height = imageArray[position] + 'px';

function slideRight() {
    position--;
    images.style.height = imageArray[position] + 'px';
    if (position == -1) {
        position = imageCount - 1;
    }

    images.style.transform = 'translateX(' + -(slideWidth * position) + 'px)';
}   

// ...

document.querySelector('.slide-right').addEventListener('click', slideRight, false);

【讨论】：