html - Image scaling inside div fails - background not following -

I am currently trying to fit an image in a divan container, but it does not work. On my page I have a complex div-tree, which looks like this:

   & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

and the following CSS:

  # one {height: 300px; Background color: red; Status: Relative; Text align: center; } #b {Height: 100%; Width: 100%; Background color: blue; Status: Completed; Top: 0; Left: 0; Text align: center; Padding: 20px; } # C {width: auto; Height: auto; Display: Inline-block; Maximum-height: 100%; Background color: black; Padding: 20px; } #d {width: 400px; Background color: yellow; Maximum-height: heirs; } IMG {max-width: 100%; Opacity: 0.7; Status: Completed; Top: 0; Left: 0; Correct: 0; Bottom: 0; Height: Calc (100% -80px); Margins: Auto; }  

I want the image to be placed in a blue container. It should also be kept in mind about the given Divya Containers. Currently black does not fill the padding till the end of a container.

I hope someone can help you.

Here's a new concept for you box-size: border-box Padding automatically includes percentage width and height, image no longer requires status: full .

The width and height of all internal devices are controlled by the width on the # A container and their padding.

new demo

< Pre class = "snippet-code-css lang-css very print-override"> * {margin: 0; Padding: 0; Box-size: border-box; } # A {background-color: red; Status: Relative; Text align: center; Width: 400px; Padding: 20px; } #b {background: blue; Padding: 20px; } #s {background-color: black; Padding: 20px; } #D {background-color: yellow; Padding: 20px; } IMG {width: 100%; Display area; / * Inline difference * /}

  & lt; Div id = "a" & gt; & Lt; Div id = "b" & gt; & Lt; Div id = "c" & gt; & Lt; Div id = "d" & gt; & Lt; Img src = "http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

old answer

• remove width: auto; Height: auto; and padding: 20px at #c

• Place height: 100 Height: 100% at #c

causes it / code> of #c is affected by padding at #b , so any additional padding will blow up altitude.

Demo

  # A {Height: 300px; Background color: red; Status: Relative; Text align: center; } #b {Height: 100%; Width: 100%; Background color: blue; Status: Completed; Top: 0; Left: 0; Text align: center; Padding: 20px; } # C {height: 100%; Display: Inline-block; Background color: black; } #d {width: 400px; Background color: yellow; Maximum-height: 100%; } IMG {max-width: 100%; Opacity: 0.7; Status: Completed; Top: 0; Left: 0; Correct: 0; Bottom: 0; Height: Calc (100% -80px); Margins: Auto; }  

  & lt; Div id = "a" & gt; & Lt; Div id = "b" & gt; & Lt; Div id = "c" & gt; & Lt; Div id = "d" & gt; & Lt; Img src = "http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;