Javascript 幻灯片容器相同高度

我有一个图像幻灯片，其中有四个不同高度的图像。我试图让它们都保持700px的高度，但我不知道怎么做。我将

img

设置为

max height:700px

，但这似乎不起作用

这是我的建议

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myslides”）；
var dots=document.getElementsByClassName（“dots”）；
如果（n>幻灯片长度）{
slideIndex=1
};
if（n<1）{
slideIndex=slides.length
};
对于（i=0；i

正文{
字体系列：verdana，无衬线；
保证金：0；
字体大小：100%；
}
#幻灯片容器{
位置：相对位置；
保证金：自动；
背景色：黑色；
溢出：隐藏；
}
#幻灯片容器img{
显示：块；
保证金：0自动；
最大宽度：100%；
位置：相对位置；
最大高度：700px！重要；
}
迈斯利德斯先生{
显示：无；
}
.prev，.next{
位置：绝对位置；
最高：50%；
字体大小：30px；
字体大小：粗体；
填充：16px；
利润上限：-22px；
边界半径：0 3px 3px 0；
颜色：#fff；
光标：指针；
z指数：1；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
.标题{
文本对齐：居中；
位置：绝对位置；
底部：5px；
宽度：100%；
颜色：#F2F2；
字号：1em；
/*字体大小：15px*/
/*填充：8px22px*/
}
.褪色{
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@关键帧淡入淡出{
从{opacity:0.4；}
到{opacity:1；}
}

文本1
文本2
文本3
文本4
❮
❯

将

最大高度：700px

样式更改为

高度：700px

和

宽度：100%至
宽度：自动


var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myslides”）；
var dots=document.getElementsByClassName（“dots”）；
如果（n>slides.length）{slideIndex=1}；
如果（n<1）{slideIndex=slides.length}；
对于（i=0；i
将属性height=“700px”添加到外部容器
对于每个img元素，具有相同的属性height=“700px”，即：



文本1
文本2
文本3
文本4
❮
❯
我建议另一种方法，将图像添加为背景图像，因为这样可以更容易地设置特定高度并保持相对宽度


var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myslides”）；
var dots=document.getElementsByClassName（“dots”）；
如果（n>幻灯片长度）{
slideIndex=1
};
if（n<1）{
slideIndex=slides.length
};
对于（i=0；i

正文{
字体系列：verdana，无衬线；
保证金：0；
字体大小：100%；
}
#幻灯片容器{
位置：相对位置；
保证金：自动；
背景色：黑色；
溢出：隐藏；
}
#幻灯片显示容器>div{
位置：相对位置；
高度：700px；
宽度：100%；
}
#幻灯片容器.bg img{
背景重复：无重复；
背景尺寸：自动100%；
背景位置：中心；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}
#幻灯片容器img{
显示：块；
保证金：0自动；
最大宽度：100%；
位置：相对位置；
最大高度：700px！重要；
}
迈斯利德斯先生{
显示：无；
}
.prev，
.下一个{
位置：绝对位置；
最高：50%；
字体大小：30px；
字体大小：粗体；
填充：16px；
利润上限：-22px；
边界半径：0 3px 3px 0；
颜色：#fff；
光标：指针；
z指数：1；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
.标题{
文本对齐：居中；
位置：绝对位置；
底部：5px；
宽度：100%；
颜色：#F2F2；
字号：1em；
/*字体大小：15px*/
/*填充：8px22px*/
}
.褪色{
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@关键帧淡入淡出{
从{
不透明度：0.4；
}
到{
不透明度：1；
}
}

文本1
文本2
文本3
文本4
❮
❯


您好，请尝试删除图像并将其作为带封面的背景img，或者将图像剪切为相同的宽度和高度替换最大高度与高度：700px；这很有效。在全屏上效果很好，但您可能必须对较小的设备使用
媒体查询
，因为图像无法扩展到所需的帧宽度。我建议建议改为使用背景图像，这样你就可以将图像居中，更容易控制不同的屏幕。@Nandita Arora Sharma我做了你建议的更改，但是