将图像调整为自动调整大小的柔性孩子

Question

我有一个非常奇怪的问题，我一直试图解决过去两天无济于事。页面我的建筑结构如下：

我可以轻松实现AB布局具有display: flex; flex-direction: column; align-items: stretch和设置是flex: 0 0 auto和B的整体父是flex: 1 1 0; min-height: 100px;

不过我在B内部布局C和D的时候真的很麻烦。我觉得flex/row是B的正确方法，但我无法得到具体细节。所以我想：

.B { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between; 
} 

.C { 
    flex: 1 1 0; 
} 

.D { 
    object-fit: scale-down; 
} 

但显然这是不够的。如果我将它设置为也有最小宽度的flex: 1 1 0，图像或者根本不缩小，缩小但扭曲或者留下大量空间。

任何想法如何我可以实现我所需要的？

更新：我试图把这里的jsfiddle一起 - https://jsfiddle.net/2gsrzwwq/3/ - 但由于某些原因，它甚至不会对母孝敬height:100%。就图像拟合而言，我需要将图像缩小到D div的高度，然后让D块的宽度减小以包含缩小的图像 - 并且C块占用剩余宽度。

Answer 1

经过更多的斗争和另一个不眠之夜，我想出了一些工作。我必须做的牺牲不是调整图像容器的宽度，而是总是以屏幕宽度的一半来解决（请注意，在真实应用程序中，没有背景颜色，所以它看起来并不奇怪，相反会有一些额外的空白空间）。我将不得不与客户讨论这个问题，但我想我可以说服他们。以下是我想出了：

https://jsfiddle.net/2gsrzwwq/6/

HTML：

<div class="page"> 
    <div class="A"> 
    </div> 

    <div class="B"> 
    <div class="C"> 
    </div> 
    <div class="D"> 
     <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/> 
    </div> 
    </div> 
</div> 

CSS：

div { 
    box-sizing: border-box; 
} 

.page { 
    width: 100%; 
    height: 250px; 
    border: solid 1px black; 
    margin: 5px; 
    background-color: lightYellow; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: flex-start; 
} 

.A { 
    background-color: lightPink; 
    margin: 5px; 
    flex: 0 0 50px; 
} 

.B { 
    background-color: lightBlue; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 80px; 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between 
} 

.C { 
    background-color: lightGreen; 
    margin: 5px; 
    flex: 1 1 0; 
    min-width: 100px; 
} 

.D { 
    background-color: lightGrey; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 50px; 
    display: flex; 
    justify-content: flex-end; 
} 

.D img { 
    flex: 1 1 0; 
    max-height: 100%; 
    max-width: 200px; 
    object-fit: scale-down; 
    object-position: top right; 
} 

Answer 2

我一模一样的问题所困扰自己：

Maximum possible size image and div expanding to fill the space

我想出了以下解决方案，我也提供了作为我自己问题的答案。 见 https://jsfiddle.net/wwhyte/vjLps7qs/;用http://placekitten.com/1600/900替换图像以查看横向行为。

CSS：

.container { 
    width: calc(100vw); 
    height: 100vh; 
    overflow: hidden; 
    } 

    .top { 
    height: 1.25em; 
    background: yellow; 
    } 

    .innerCtr { 
    height: 100%; 
    overflow: hidden; 
    } 

    .left { 
    height: 100%; 
    background: red; 
    overflow: hidden; 
    } 

    .right { 
    max-height: 100%; 
    max-width: 80%; 
    background: blue; 
    float: right; 
    object-fit: contain; 
    overflow: hidden; 
    position: relative; 
    top: 50%; 
    transform: translateY(-52%) scale(0.95); 
    } 

HTML：

<div class="container"> 
    <div class="top"> 
    </div> 
    <div class="innerCtr"> 
    <img class="right" src="http://placekitten.com/1600/900"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
    </div> 
</div> 

我认为正在发生的事情是：

• 在右类：
  • max-height，max-width和object-fit为我提供了所需的缩放比例。
  • float：right给出我需要的位置。 （我从昨天发现的一篇文章中了解到这一点，但现在已经丢失了，如果我重新找到它，我将编辑此答案以提供归属）。
  • 该变换的灵感来源于垂直对齐的文章：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/。
  • 95％的比例提高了图像的可见性。
• 在左侧类，高度：100％给予面板尺寸我想
• 的innerCtr类为父母的图像，计算针对
• 容器类高度适合视浏览器窗口。

即使这样也不太理想。顶部栏的高度和图像的高度之间存在一些奇怪的相互作用，因此图像的底部被推出显示屏。推出的数量少于顶部酒吧的高度 - 我还没有完全调查过。如果你删除顶部栏，上面的CSS表现完美。我用95％的比例和对Y变换的轻微调整来解决这个问题，但是在小窗口尺寸下，这仍然不能完全正确 - 图像不是完美垂直居中。我以为在容器类上设置height = calc（100vh-1.25em）可能会解决这个问题，但实际上它会中断图像的垂直缩放，所以它现在只能水平缩放。这是完全意外的行为！但除此之外，这符合我的需求。