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

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

1 个答案: