（Javascript/CSS）调整大小功能不起作用

我有一个容器div，它必须适合两种不同类型的图片。一些图片是“potrait”，宽度：533px，高度：801px，另一些是“景观”，宽度：800px，高度：533px。 因此，为了改变div大小以适应图片，我编写了下面描述的函数（“photos”变量是一个图片数组，[I]是一个通过图片进行更改的变量，“img”是一个获取#container元素的变量）

然后，我把这个函数放在下一个和后一个函数中，用于在图片之间切换

function next() {
        img.src = photos[i];
        el.innerHTML = caption[i];
        resize();
        if (i<photos.length-1){
     i=i+1;
    } else {
     i=0;
    }    
    } 

}

我试着查看其他调整大小的线程，但是人们需要一种方法来获得动态宽度或高度，我需要两者都是这样。我认为问题在于“clientWidth/Height”属性，我认为该属性在“.”之前获取对象的宽度/高度，我不确定是否应该将CSS容器div设置为有一个高度，或者将其设置为“auto”或某个百分比。我将感谢您在这件事上的任何帮助：）

function next() {
        img.src = photos[i];
        el.innerHTML = caption[i];
        resize();
        if (i<photos.length-1){
     i=i+1;
    } else {
     i=0;
    }    
    } 

#container {
    height: 533px;
    width: 800px;
    overflow:hidden;