css - block 元素在另一个 block 元素中的盒模型

Question

对于固定尺寸的 block 元素内的另一个 block 元素的盒子模型，例如:

   <div style="height: 200px; width:200px;">
    <figure></figure>
   </div>

内部 block 级元素的尺寸(例如:<figure>)是否必须适合外部元素的尺寸(例如:<div>)——即:小于？如果没有，我们怎么能强制他们这样做？

Answer 1

您可以通过将子元素维度设置为 100% 来实现。

div>figure {
 width: 100%;
 height: 100%;
}

为了防止子 img 标签变形，您应该将 img 标签的高度设置为自动，将最大宽度设置为 100%。

div>figure>img {
 max-width: 100%;
 height: auto;
 display: block;
}