CSS FlexBox 和图像调整大小

Question

我实际上是在玩 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>

以及我想做的事情的图片：

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

我该怎么做？

谢谢！ =)

Answer 1

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

堆栈片段

        <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 和图像调整大小

CSS FlexBox and image resize

html

css

image

flexbox

image-resizing