CSS FlexBox and image resize

Question

I'm actually playing with flexbox, and I can't archive to resize an image in a container that have an adapative width.

Also here is a plunker for this code : https://plnkr.co/edit/QaPzOVXSx5iYQXOsit9V?p=preview

Also a direct preview :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div style="display: flex; flex-direction: row; height: 800px">
            <div style="width: 1000px; background-color: lightpink;"></div>
            <div style="flex: auto;
                        background-color: lightgreen; padding: 10px;
                        display: flex; flex-direction: column; justify-content: center;
                        min-width: 100px; max-width: 200px;">
                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto">
                </div>

                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto">
                </div>

                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="max-width: 200px; height: auto">
                </div>
            </div>
        </div>
    </body>
</html>

And a image of what I want to do :

So i want that my image resize in the green container when the screen get smaller.

How can I do that ?

Thanks ! =)

Asons · Accepted Answer · 2017-11-16T16:31:20.623

You need to add width: 100%; to the img

Stack snippet

        <div style="display: flex; flex-direction: row; height: 800px">
            <div style="width: 1000px; background-color: lightpink;"></div>
            <div style="flex: auto;
                        background-color: lightgreen; padding: 10px;
                        display: flex; flex-direction: column; justify-content: center;
                        min-width: 100px; max-width: 200px;">
                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto">
                </div>

                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto">
                </div>

                <div style="max-width: 200px; opacity: 0.5">
                    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" style="width: 100%; max-width: 200px; height: auto">
                </div>
            </div>
        </div>

CSS FlexBox and image resize

1 Answers1