html - 在网页呈现期间哪些子元素优先于父元素宽度计算

Question

有时 div 中的内容会扩展以适应父级宽度，但有时内容(如 img、table)会使父级拉伸(stretch)。在什么情况下会发生第一种或第二种情况？

Answer 1

考虑 HTML

     <div class='content'>
      <img src=" your img source "  /> 
     </div>

如果您指定内部内容宽度，div 的内容将展开以适应父级宽度

一个)

固定高度和宽度

例如

       .content{
         width:500px;
         height:500px;
       }

       .content .img{
        width:100%;  // in this case the image will be stretched or compressed to fit the div exactly
        height:100%;
       }

注意:在上述情况下，img 将始终具有 500px 的高度和宽度，尽管它具有分辨率

二)

固定宽度

例如

       .content{
         width:500px;
       }

       .content .img{
        width:100%;  // in this case the image will be stretched or compressed to fit the div exactly
       }

注意:

在上面的例子中，我们没有固定 .content 或 .content img 的高度，因此高度或宽度将根据图像大小自动调整。因此，如果图像的高度为 400px，则 .content div 的高度将为 400px，如果图像的高度为 50px，则 .content div 的高度将为 50px

c) 不固定宽度和高度

例如

   /* No style specified */

注意:

在上述情况下，.content div 的高度和宽度将根据图像具有宽度，因此如果图像具有 500px * 900px 的分辨率，则 div 将具有 500px 和 900px 的宽度和高度分别