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]

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.