0

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

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>

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

4

2 回答 2

1

像这样的东西，其中大部分与 flex 相关的 CSS 被删除，在按钮 div 上设置了 flex-grow 并且 img 被赋予宽度自动而不是使用包含？

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>

于 2020-10-01T20:15:11.177 回答
0

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

并设置父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>

于 2020-10-01T16:27:29.587 回答