what child elements get precedence over parent width calculation during webpage rendering

Question

sometimes the content inside a div is expanded to fit the parent width, but sometimes the content (like img, table) makes the parent to stretch. Under what conditions will the first or the latter one happen?

Answer 1

Consider the HTML

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

The content a div is expanded to fit the parent width , incase you specify the inner content width

a)

Fixed Height and Width

For example

       .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%;
       }

Note: In the above case the img will always have height and width of 500px desipte it resolution

b)

Fixed width

For example

       .content{
         width:500px;
       }

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

Note:

In the above case we have not fixed the height of .content or .content img therefore the height or width will auto adjust according to image size. So if image as height of 400px , the .content div will have height of 400px, if image as height of 50px the .content div will have height of 50px

c) Not fixed width and height

For example

   /* No style specified */

Note:

In the above case the height and width of .content div will have width and according to image, so if image have resoultion of 500px * 900px the div will have width and height of 500px and 900px respectively