为什么在带有 object-fit: contain 的 flexbox 下图像元素不调整到它的实际比例？

Question

我有一个容器，其中将连续显示多个图像（幻灯片放映）。有些图像是横向格式，有些是纵向格式。还有两个侧面板应该占据图像容器左侧和右侧的剩余 space。图像和侧面板具有固定高度，因此图像（和中央容器）的宽度应根据图像的比例进行调整。但是，我做不到。

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>

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

Answer 1

设置图像的 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>

Answer 2

像这样，大部分 flex-related CSS 被删除，在按钮 div 上设置 flex-grow 并且 img 被赋予自动宽度而不是使用 contain?

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>

为什么在带有 object-fit: contain 的 flexbox 下图像元素不调整到它的实际比例？

Why doesn't the image element resize to its real proportion under flexbox with object-fit: contain?

html

css

flexbox

object-fit