There is a layout view:

<div class="left"> text </div> <div class="right"> text </div> <div class="center"> <img....> </div>

CSS:

 .left { float: left; width: 303px; padding: 30px 0 0 0; } .right { float: right; width: 425px; padding: 30px 0 0 0; } .center { padding: 0 40px; text-align: center; max-width: 100%; }

When the browser window is reduced, the block with the image goes down. How can I reduce the image while reducing the size of the browser window using css?

I tried the image style

 .center img { max-width: 100%; height: auto; }

Does not help.

1 answer 1

Interest is calculated relative to the parent unit, but you do not have it. Add a position: relative style to the .center block; and then the image will not go beyond it.

 .left { float: left; width: 303px; padding: 30px 0 0 0; } .right { float: right; width: 425px; padding: 30px 0 0 0; } .center { padding: 0 40px; text-align: center; max-width: 100%; position:relative; } .center img { max-width: 100%; height: auto; } 
 <div class="left">text</div> <div class="right">text</div> <div class="center"><img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/></div>