为何<div>容器无法限制内部元素尺寸？CSS布局疑问

你的代码示例 #

HTML代码：

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="root">
            <div class="conteiner">
                <img src="https://b2b.ostrovok.ru/wp-content/uploads/2022/01/1-2.jpg" class = "image">
            </div>
        </div>
    </body>
</html>

有效CSS（直接设置图片宽度）：

.image {
    width: 30vw;
}

无效CSS（仅设置容器宽度）：

.conteiner {
    width: 30vw;
}

问题原因 #

图片属于替换元素，这类元素的默认尺寸由自身原始宽高决定，不会自动适配父容器的宽度。你仅设置了容器的宽度，但未给图片添加任何约束规则，因此图片会按自身原始尺寸渲染，不受容器宽度限制。

解决方法 #

要让容器限制图片尺寸，需给图片添加响应式约束样式，常见两种方案：

方案1：让图片最大宽度不超过容器（推荐，保持比例）

.conteiner {
    width: 30vw;
}
.image {
    max-width: 100%;
    height: auto;
}

• max-width: 100%：确保图片宽度永远不超过父容器宽度
• height: auto：自动计算高度，维持图片原始宽高比，避免拉伸变形

方案2：强制图片占满容器宽度

.conteiner {
    width: 30vw;
}
.image {
    width: 100%;
    height: auto;
}

该方式让图片宽度完全等于容器宽度，同样通过height: auto保持比例。

内容的提问来源于stack exchange，提问作者xzxolop