Eliminate “padding” (visual space) with object-fit, or, how do you scale a row of images to fit a div properly?

问题

I have a fixed-height interface I'm styling with CSS. I want it to be responsive to browser height (and, eventually, width... but one problem at a time) and I have a fiddle in which the interface operates almost exactly as I'd like it to with respect to browser height... with one exception.

I use a flexbox layout with object-fit: scale-down to force the row of images in the green div to shrink when their containing div is not tall enough to fit the images at native dimensions. This results in some "padding," the existence of which is perfectly well explained here. I've made the background color of the relevant div blue so that you can clearly see the visual space I'm talking about. I do not want this space to appear at all.

So, what is the proper way to make a row of images responsive in the way I'd like without introducing additional visual space between the images if object-fit cannot do this? Thank you for the input.

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

<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">
    <div class = "context">
      <img src="https://via.placeholder.com/75x250">
    </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>
</div>

来源：https://stackoverflow.com/questions/63238310/eliminate-padding-visual-space-with-object-fit-or-how-do-you-scale-a-row-o

标签

html

css

flexbox