Question

我有用户生成的内容需要扩展以适应父容器。我无法控制div中的任何内容。

.container {
  max-width: 300px !important;
  border: 1px solid black;
}

<div class="container">
    <p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
    
    <p>
    Other content
    </p>
    <p>
    CSS IS AWESOME
    </p>
    
</div>

如何保持内容约束？

Answer 1

所以你必须为任何级别的所有孩子指定max-height为100％父元素:)

＆＃13;

.container {
  max-width: 300px;
  border: 1px solid black;
}
.container *{
  max-width:100%;
}

＆＃13;

<div class="container">
    <p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p>
    
    <p>
    Other content
    </p>
    <p>
    CSS IS AWESOME
    </p>
    
</div>

＆＃13;

我建议你摆脱！重要的是，如果没有其他东西正在修改元素，那么CSS名称将被证明为Cascading一词:)

Answer 2

我不确定您为什么要将图片宽度内联设置为设定的像素宽度，但这样可以确保图片永远不会超出其容器的范围：

CSS：

img {
  max-width: 100% !important;
}

停止显式内联宽度大于父div的img

2 个答案: