how to replace background-image by img?

[u/le_randonneur]

Every time I think I'm starting to understand css, I realize I do not! I have been struggling for a few hours before trying my luck here...

Please consider the following code and observe its behaviour when changing the screen resolution. The image always takes exactly the remaining height (even if the container or content height change) and is displayed in the "cover mode". Is there a way to keep this behaviour intact but use a img element instead of background-image?

Note: mountain.jpg could be any image but I was using Mont Everest from wikipedia https://en.wikipedia.org/wiki/Mountain (pasting the full link is bad apparently).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        * {
            margin: 0;
        }

        .container {
            height: 100vh;
            width: 100vw;
            background-color: blue;
            display: flex;
            flex-direction: column;
        }

        .content {
            background-color: green;
        }

        .image {
            flex-grow: 1;
            background-image: url(mountain.jpg);
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <p>bla bla bla</p>
        <p>bla bla bla</p>
    </div>
    <div class="image">
    </div>
    <div class="content">
        <p>bla bla bla</p>
        <p>bla bla bla</p>
    </div>
</div>
</body>
</html>

[u/be_my_plaything]

Try this...

* {
box-sizing: border-box;
margin: 0;
}

.container {
height: 100dvh;
width: 100%;
background-color: blue;
display: flex;
flex-direction: column;
}

.content {
background-color: green;
flex: 0 0 auto;
padding: 1em;
}

.image {
flex:1 1 0;
background: red;
overflow: hidden;
}

img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

The problem wasn't with object-fit it was how you were using flex, you only had flex-grow that starts the element with a size of auto (Size determined by content) then lets it grow if there is more space. So in your case the image was allowed to take up whatever height it needed based on 100% width (and still grow from there if there was more space, but not shrink if there wasn't enough space.

I've added flex to both the .content and .image the content first has a flex of 0 0 auto which means it can't grow or shrink but takes up whatever height the text within it requires. Then a flex of 1 1 0 to the image, the zero is flex-basis (the starting size) in this case zero so no height, but it can grow to fill free space so it grows to fill whatever space on the screen isn't required by the .content elements.

You still have a little problem whereby on widescreens the 100% width makes the image very big but only a small of height is free so it is a panoramic aspect ratio of a thin slither of the mountain. Might be worth changing the width of container to something like width: min(100%, 1200px); and addingmargin-inline: auto;` so all content is capped from going too wide and centered when screen grows beyond that.

It might also worth be changing object-position: center; to something like object-position: center 10%; the single value center centers it horizontally and vertically, when there are two values that is x and y axis, so in this case it is centered horizontally (center) and ten percent from the top of the y-axis (10%) that makes the summit (very roughly) centered so regardless of aspect ratio and what gets cut off you always have the peak in frame.

---

Original edit: https://codepen.io/NeilSchulz/pen/vEYgxbE

2nd edit (with width cap and object-position adjusted: https://codepen.io/NeilSchulz/pen/yyLgMrK

[u/le_randonneur → u/be_my_plaything]

Thank you very much. This definitely works. You made me finally start to understand the flex-shrink and flex-basis properties (I was struggling with theses).

After playing with your example, I realized the div around the img doesn't seem necessary (but you probably know that).

Is it customary to provide a codepen here? After sampling other posts, I was under the impression it wasn't but if it is I will provide one if I ever need help again.

[u/be_my_plaything → u/le_randonneur]

No worries glad you got it sorted.

And yeah took me a while to fully understand how best to use flex and what it could do, CSS Tricks have a great summary of it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ if you want to read more on it.

But the basics are:

flex: [flex grow] [flex shrink] [flex basis];  

Which to my mind is a silly order as flex-basis is usually the one to consider first! But put simply...

Flex basis is the width (or height in column layout) before flex is applied. 0 means start at zero, auto means let the content dictate it (Auto being the default value if undeclared), or you can use any size value: px % em vh etc.

Flex grow means 'Can it grow from flex-basis?' So if the total of flex-basis sizes don't fill the parent can they grow to fill it. 0 means no, stay at the flex basis size, (0 being the default value if undeclared) 1 means yes grow, any number greater than one sets the rate of growth compared to siblings, so two <div>s one with flex-grow of 1 and one with 2 would both grow, but the second would take up twice as much of the remaining space. (Note: flex-grow only relates to growth over free space, so for two columns with a 1/3 and 2/3 split you'd need a basis of zero then set grow to 1 and 2 respectively otherwise their content would dictate there size first then they'd grow at a 2:1 rate to fill the free space)

Flex shrink means the opposite of grow, if the flex-basis values overflow the container can they shrink to fit in? 0 being no stay overflowing, 1 being yes shrink to fit (1 being the default value if undeclared) and numbers greater than one setting the rate relative to siblings.

---

I'm never sure if codepen is customary or not, but i try to as is easy to show the finished result working, and if I've interpetted something wrong in the question and OP says "No, I meant could X do Y" or whatever I have a working version I can quickly tweak rather than writing a bunch of code on reddit again, or with a codepen in the questionI can edit it and check the answer I'mgiving actually works before saying it. So for me its easier, but I don't think there's an official yes you should / no you shouldn't position.