Question

我正在尝试设置出现在所使用的闪存卡程序中的某些HTML的样式，对于做错的事情我感到非常迷惑。我想要的是非常简单的（我认为），用例使我成为flexbox的理想选择，但也许我的方法是错误的。

这是一列内容。主图像显示在列的顶部，而两个辅助图像并排出现在主图像的正下方。一些文字出现在下方。

最外面的容器的高度取决于浏览器的高度。随着浏览器区域的缩小，如果有更多浏览器区域可用，则图像应按比例缩小，但不可以按比例缩放（超出其标称尺寸）。次要图像的缩小速度应比主要图像更快；如果空间有限，则应将更多内容移至主映像。辅助图片通常不会共享相同的尺寸，因此两个图片中的较大图片应在缩小图片之前开始缩小（即，仅在必要时缩小）。在缩放过程中应保持所有长宽比。

到目前为止，我所拥有的（here's a fiddle）几乎可以满足我的要求，除了辅助图像不会随浏览器高度缩小，而主要图像不会随浏览器宽度缩小。这是迭代20或30，因此，如果遗留一堆残留规则，我们深表歉意。我真的可以帮忙！谢谢！

编辑：有关如何使内容随着浏览器高度缩小而响应的可视化效果，请参见下文。请注意，1）次要图片永远不会超出其黄色容器2）仅在必须缩放时才缩放（150x75根本不需要缩放，因为相邻图片很高）3）黄色容器的缩放速度比主要图片更快，并且4）所有图像都保持其纵横比。

Before Browser height reduction ---> After

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;
}

.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;
    padding: 0px;
    margin: 0px;
    font-size: 0;
    min-width: 0;
    min-height: 0;
    background-color: yellow;
}

.context {
    display: flex;
    min-height: 0;
    background-color: blue;
}

.content img {
    height: 100%;
}

.primary {
    position: relative;
    z-index: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    font-size: 0;
    min-height: 0;
}

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

.mobile .nightMode .primary img {
    border-style: solid;
    border-width: 3px;
    border-color: black;
}

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

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

<div class="container">
<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"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
    </div>

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

</div>
</div>

Answer 1

我认为这可能是一种可能的解决方案，＃img1是辅助图像的第一个：

img {
    max-width: 100%;
}

#img1 {
    height: 20vw;
    max-height: 150px;
    min-height: 75px;
} 

.primary img {
    height: 50vw;
    max-height: 200px;
}

Answer 2

这些规则解决了问题although there are still some issues with this approach that could be of importance。

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: 0 1.5 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 0;
    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;
}

具有缩小图像的单列伸缩容器

2 个答案: