Code copy on jsfiddle

html, body { height: 100%; } .table { display: table; width: 100%; height: 100%; } .table__cell { display: table-cell; vertical-align: middle; } img { display: block; max-width: 100%; margin: 0 auto; } 
 <div class="table"> <div class="table__cell"> <img src="http://placehold.it/750x350" alt=""> </div> </div>

It uses a standard technique with display: block; and max-width: 100% for images:

 img { display: block; max-width: 100%; }

If you increase / decrease the width of the container, the image reduces / increases its width and at the same time proportionally decreases / increases its height. This is a very cool feature of images, where it helps a lot.

How to make it so that when you increase / decrease the height of the container, the image behaves like the first case: the height of the image becomes equal to the height of the container and the width of the image also proportionally decreased / increased? How to do this without javascript? (I know how to do it with javascript.) You can use the most fashionable CSS3 stuff.

    2 answers 2

    In general, as it turned out, all you need is one rule and a block container around, so that the image scales in height - max-height: 100% :

     img { display: block; max-width: 100%; max-height: 100%; }

    Here is a ready fiddle . (Naturally, the resize frame needs a frameframe (aka container)).

    It was experimentally found that such a resazy is possible only inside block elements (for example, body ). In elements with display: table and display: table-cell, the image is resized only in width, and with display: flex it is not resized at all.

    It is necessary to proportionally resize Javascript.

      If I understand correctly, then you need to change the image size when the browser window is resized to its height .

      In this case, CSS tools cannot do this the same way as with the width, for the reason that the height, as it were, has no limit, which means that it is not possible to set the height relative to the browser window in percentage terms.

      In this situation, I still see only one way out - these are media queries ( @media ). There is no need to wait for a smooth image change, although some imitation can still be done :

       html, body { height: 100%; } .table { display: table; width: 100%; height: 100%; } .table__cell { display: table-cell; vertical-align: middle; height: 500px; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; } @media (max-height: 600px) { .table__cell { -moz-transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } } 
       <div class="table"> <div class="table__cell"> <img src="http://www.nn.ru/data/forum/images/2009-12/17931702-putin-obyavil-.jpg" alt=""> </div> </div>

      In the example, change the frame.

      alt text