为什么在flexbox下使用object-fit：contains将图像元素调整为实际比例？

问题描述

我有一个容器，其中多个图像将连续出现（幻灯片放映）。一些图像为横向格式，另一些为纵向格式。还有两个侧板应该占据图像容器左侧和右侧的剩余空间。图像和侧面板的高度固定，因此图像（和中央容器）的宽度应根据图像的比例进行调整。但是，我无法完成这项工作。

html,body {
    margin:0;
}
main {
    display:flex;
    flex-direction:column;
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:white;
    display:flex;
    justify-content:center;
    flex:0 1 auto;
}
#imgSlide {
    object-fit:contain;
    height:100%;
  width:100%;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>

您可以在代码段中看到，原始图像相当大，即使调整大小后，图像对象也变得很大。图像侧面的白色区域应被绿色面板占据。我在做什么错了？

解决方法

像这样删除大部分与flex相关的CSS的事情，在divs上设置了flex-grow，并且img被赋予了width自动而不是使用contains？

html,body {
    margin:0;
}
main {
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex-grow: 1;
    float: left;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:pink;
    float:left;
    width:auto;
    height:100%;
}
#imgSlide {
    height:100%;
  width:auto;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>

,

设置图像的max-width & max-height而不是设置width & height css属性。

并设置父div display: contents，它将起作用。

html,body {
    margin:0;
}
main {
    display:flex;
    flex-direction:column;
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:white;
    display: contents;
}
#imgSlide {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>