1

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>
ratburger
  • 21
  • 4
  • Have you tried the `cover` and `fill` values of `object-fit`? – Michael Benjamin Aug 04 '20 at 00:10
  • Cover may crop the images, and fill may distort them, so unfortunately those settings do not achieve the design goal. I tried them both just to be sure. Thank you for your input. – ratburger Aug 04 '20 at 00:24
  • Yes. I was aware of the cons, but wasn't sure if you had tried them, just in case. – Michael Benjamin Aug 04 '20 at 00:26
  • Here's something to consider: Elements are sized as the browser renders the code. Once the rendering process is complete, the browser *does not* reflow the document when a user resizes the screen. This creates the gaps you see, as the surrounding elements have no awareness of the image being scaled during screen resizing. – Michael Benjamin Aug 04 '20 at 01:08
  • Here's a more detailed explanation and possible solutions: https://stackoverflow.com/a/37413580/3597276 – Michael Benjamin Aug 04 '20 at 01:09
  • That's helpful. I'm not great with CSS, so let me check my understanding: the image container sets its width using the native image (its child) width, since that's what it expects to be there, and it doesn't really know that the image is later scaled down. As a consequence, it doesn't later reduce its width to fit the new image width. Is that correct? What I understand less is what to do about it... how might I use, say, media queries to solve this sort of problem? Or maybe a totally different approach? Any pointers would be appreciated. Thanks again for the help. – ratburger Aug 04 '20 at 16:06

0 Answers0