将图像滑块调整为当前图像大小'；JavaScript中的s纵横比

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

我尝试将

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>

---

最终解决了这个问题，可以按照我的要求垂直调整大小。只需将循环移动到

slideRight

函数上方，设置新的空数组变量

imageArray

，

将所有内容从循环推送到该数组，然后将函数中的样式设置为从该数组读取，并根据已存在的用于滑块工作的变量
position=0
更改宽度

还对样式进行了调整，从
.slider images
中删除了
max height
，并将
.slider images img
设置为
max height:unset，如果您的
img
设置为
最大高度：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);

var位置=0；
var指数=0；
var imageArray=[]；
//...
用于（索引；索引
您不需要这样做，容器会根据包含的最高可见图像调整其高度。您只能使用带有img{width:100%；height:auto}@Sim1-81的CSS，我知道这一点，但是当前如果幻灯片中有不同的纵横比图像，则会从侧面裁剪图像，我希望通过调整图像所在容器的大小来保持图像的100%可见。图像会自动调整大小以适应
滑块图像
容器，直到它们达到容器的最大宽度，然后开始垂直裁剪。我将包括这些元素的CSS以防万一。如果图像被裁剪，则存在溢出的父元素：hidden，如果是，请尝试删除该行CSS，否则您必须在文档上循环图像，准备将任何图像的维度存储到数组中，然后当您滑动时，您可以从该数组中拾取当前图像的高度并将其应用于滑块。向容器添加一些过渡以平滑动画。然后，如果您将图像循环从slideRight（）函数移出，并将其放入一个单独的函数中，您可以调用另一个函数将维度存储在document.ready（）和window.resize（）中，以添加响应行为。要执行上述操作，您必须知道必须显示的下一幅图像的索引
.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;
}

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);