CSS FlexBox 和图像调整大小答案

【问题标题】：CSS FlexBox and image resizeCSS FlexBox 和图像调整大小
【发布时间】：2018-04-30 06:52:08
【问题描述】：

我实际上是在玩 flexbox，我无法存档以调整具有自适应宽度的容器中的图像大小。

这里还有一个代码：https://plnkr.co/edit/QaPzOVXSx5iYQXOsit9V?p=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>

还有一张我想做的图片：

所以我希望当屏幕变小时我的图像在绿色容器中调整大小。

我该怎么做？

谢谢！ =)

【问题讨论】：

标签： html css image flexbox image-resizing

【解决方案1】：

您需要将width: 100%; 添加到img

堆栈sn-p

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

【讨论】：

是的...打败我 :)