Hello, how knowing the parameters of the image (php getimagesize) to set the div'y in which the image is located, the same height as the image will have? while the image does not have a maximum length, but adapts to the screen extensions (i.e., max-width is 100%)

in other words, you need to make a block of the desired height as a lining for the image so that when entering the site it was not initially small and then increased as the picture was loaded

  • With a resolution of 2560px and above, will the image also adapt to the extension? - labris

2 answers 2

The easiest way to embed PHP into a template. The simplest example is:

<div style="height:<?php echo $imageHeight; ?>"> . . . </div>

If you are using AJAX, the principle is the same, only the height will be set by JavaScript.

  • one
    This method is not suitable because a person has a rubber image length, that is, at different scales of the screen, the height of the image can be cropped because the picture will be adjusted and the block will remain the same height - turik97

There is an old way to make a spacer with padding-bottom, it works, because the percentages of padding-bottom are percentages of the width of the element, not the height of the container.

 .img-container { position: relative; width: 100%; background: red; } .img-place { width: 100%; height: 0; } .img-container img { position: absolute; width: 100%; top: 0; left: 0; } 
 <div class="img-container"> <!-- считаем padding bottom как 200/640*100, вставляем любым удобным способом --> <div class="img-place" style="padding-bottom: 31.25%"></div> <img src="https://placehold.it/640x200" /> </div>