使用CSS Flex，我希望水平可视化3个静态元素，然后在一组图像中的一个图像下方，这些图像可以具有不同的大小、宽度和高度。我希望使用图像的所有垂直空间，并自动调整宽度，以确保整个图像不会溢出。我的解决方案正确地调整了Chrome和Edge的大小，但始终显示Firefox的最大宽度。有什么办法绕过这个吗？感谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./test.css" rel="stylesheet" />
</head>
<body>
<div class="outer-container">
<div class="slider">
<div class="leftslide" id="previous"><</div>
<div class="centername"><p id="placeNameImage"></p></div>
<div class="rightslide" id="next">></div>
</div>
<div class="sliderimages" id="actualImage">
<img id="y" src="">
</div>
</div>
<script>
var url = "vaio.jpg";
document.getElementById("placeNameImage").innerHTML = "image = " + url;
document.getElementById('y').src = url;
</script>
</body>
</html>
CSS代码test.CSS如下：
.outer-container {
display: flex;
flex-direction: column; /* stack 'slider' above 'sliderimages' */
height: 98vh;
background-color: #e6ffff; /* very light blue */
}
.outer-container .slider {
display: flex;
flex-direction: row; /* elements stacked horizontally */
justify-content: space-between;
height: 30px;
border: 2px solid #29a8e2; /* shade of blue */
background-color: #ffffe6 /* very light yellow */
}
.outer-container .slider .centername {
color: #0000cc; /* dark blue */
text-align: center;
font-size: 14px;
line-height: 0px;
}
.outer-container .slider .leftslide,.outer-container .slider .rightslide {
height: 30px;
width: 30px;
line-height: 30px; /* centre of arrow */
background-color: #444444; /* black */
border-radius: 50%;
color:#ffffff; /* white */
font-size: 20px;
cursor: pointer;
margin-top: 0;
text-align: center;
}
.outer-container .slider .leftslide:hover,.outer-container .slider .rightslide:hover {
box-shadow: 0px 0px 10px black;
background-color: #29a8e2; /* shade of blue */
}
.outer-container .slider .leftslide {
left: 30px;
top: 10px;
}
.outer-container .slider .rightslide {
right: 30px;
top: 10px;
}
.outer-container .sliderimages {
max-height: calc(98vh - 30px - 2px - 2px);
margin: auto;
max-width: 100vw;
}
.outer-container .sliderimages img {
width: 100%;
height: 100%;
}
所使用的图像被称为"；vaio.jpg"；但我无法上传。只要分辨率超过800x800像素，任何图像都可以。
更新：防止图像水平拉伸&居中对齐
.outer-container .sliderimages {
display: flex;
/*[...]*/
justify-content: center;
}
.outer-container .sliderimages img {
align-self: start;
height: 100%;
max-width: 100%;
}
笔：https://codepen.io/scheinercc/pen/OJZayMG