缩小一行图像以适应容器高度并保持纵横比答案

【问题标题】：Shrink a row of images to fit container height and maintain aspect ratios缩小一行图像以适应容器高度并保持纵横比
【发布时间】：2020-08-06 04:14:22
【问题描述】：

我想知道如何缩小一排图像，以便它们都适合一个未指定高度的 div。图像不应放大到超出其原始高度，并且必须保持其纵横比。另外，我希望包含 div 的高度限制为最高图像的本机高度。图片标签没有高度或宽度属性。

Here's a fiddle 到目前为止我所拥有的。我使用 flexbox 和 object-fit: scale-down 来解决这个问题。有问题的图像行是灰色的，位于绿色背景的 div 中。它们目前根本没有缩放，但它们至少垂直和水平居中，我希望它们是这样的。这是我想要实现的效果的before 和after 图像（抱歉将图像中的绿色背景切换为黄色）。代码sn-p下方的其他详细信息，但这大约总结了基本问题。

body {
    font-family: arial;
    font-size: 26px;
    text-align: center;
    color: black;
    background-color: white;
}

.smallhint {
  font-size: 16px;
  color: #8c8c8c;
}

img {
    padding: 0;
    margin: 0;
    font-size: 0;
    display: block;
    object-fit: scale-down;
    min-height: 0;
}

.flex-column {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    height: 90vh;
    flex-grow: 0;
    min-width: 0;
    min-height: 0;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex: 0 1.5 auto;
    justify-content: center;
    align-items: center;
    background-color: green;
}

.context {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  background-color: blue;
}

.primary {
    position: relative;
    z-index: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    font-size: 0;
    min-height: 0;
    align-items: end;
    background-color: orange;
}

.primary img {
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
    border-color: black;
    height: calc(100% - 2*3px);
}

.mask {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.nonimage {
    padding-top: 5px;
    display: inline;
  background-color: pink;
}

<div class="flex-column">

    <div class="primary">
    <img src="https://via.placeholder.com/200">
        <div class="mask">
      <img src="https://via.placeholder.com/200/FF000">
    </div>
    </div>

    <div class="flex-row">
    <div class="context">
      <img src="https://via.placeholder.com/75x150">
    </div>
    <div class="context">
      <img src="https://via.placeholder.com/150x75">
    </div>
    </div>

    <div class="nonimage">
        <div class="smallhint">Some Text<br>Other Text</div>
    </div>

</div>

我正在开发一个使用 CSS 样式的（固定高度）界面，并且可能会提出一系列问题。我不擅长 CSS，所以我愿意接受与我失败的尝试截然不同的方法！

顶部是一个居中的图像（“主要图像”），下方是连续的两个其他图像（“次要图像”），下方是一些文本。最后，我希望两个图像集能够响应浏览器高度和宽度的变化。但是，当浏览器太短而无法包含原生尺寸的所有内容时，我想优先缩小次要图像而不是主图像。为此，似乎具有各种 flex-grow 值的 flexbox 容器可以在这里工作；它似乎在某种程度上适用于主图像，但辅助图像拒绝缩放。

另外，我知道，即使我当前的方法有效，the object-fit: scale-down strategy would leave behind some unwanted "padding" 也会导致次图像之间出现视觉空间。我有一种感觉，最终可能需要一种非常不同的方法来获得我想要的效果，因为我希望图像彼此相邻，周围没有额外的空间。此外，当浏览器变得非常薄时，容器本身似乎也存在问题，因为会出现滚动条，但它应该始终为 90vh。

谢谢大家的意见！

【问题讨论】：

你的问题有点模糊，很难看出你想要达到什么目的。但是，您是否尝试过 flex-wrap 属性？
您是否有不清楚的特定部分？我可能离问题太近而无法意识到它并不清楚。我提供的图片有用吗？至于 flex-wrap：我不希望图像换行，所以我将其保留为默认的“nowrap”。感谢您的宝贵时间。
不完全是。你能分享一下最终产品的样子吗？
这里是最终产品的before 和after 图像。以前，所有图像都是原生尺寸，因为浏览器高度足以容纳所有内容。之后，浏览器高度降低。这会导致包含图像的 div 高度缩小。对于“次要”图像行（黄色背景），这会强制纵向图像（左）缩小，同时保持其纵横比。横向图像（右）刚好适合 div，因此在此示例中不必缩小。再次感谢。

标签： html css flexbox

【解决方案1】：

为.flex-row 添加min-height: 0; 规则。我想这意味着当我问这个问题时它已经非常接近工作了。

此解决方案保留了我在问题中提到的关于使用object-fit: scale-down（或cover）时围绕图像创建的额外“填充”的问题。所以，这意味着我将成为asking another question about that topic!

【讨论】：