I noticed this download style on https://unsplash.com/ ( Probably everyone knows) Help please, I will wait for an answer enter image description here

enter image description here

  • Initially there is backgroud: gradient, background-image appears on loading, and the size is specified in pixels - Ruslan Semenov
  • I did not understand anything honestly - An excess of Gophers
  • one
    Hello. You should write your html / css code and paste it into your question, so that the respondent could just take it and modify it to suit your needs, and not do the work for you in the picture you see. Good luck to you. - Alexander Kazakov
  • @AlexandrKazakov what code do you expect, if the author doesn’t even know about how this function is implemented? - andreymal pm
  • one
    @andreymal Не требуйте того, что совершенно не требуется - an amazing statement. After all, even here, the author of the question has already answered himself, and now, his answer contains HTML and CSS code. And what did I ask? - true markup (HTML code) and styles (CSS code). Even the author himself, answering, wrote all this, and even seeing it, you tell me that I do not require HTML and CSS code. I can’t find the words to explain that the layout and styles are needed in the layout, even the author of the question decided that it is necessary here, perhaps he will believe ... - Alexander Kazakov

1 answer 1

To whom it is interesting to find a solution, the height of the placeholder is formed from the css padding-bottom property, then the height of the image is substituted for this property, it is taken (possibly) from the database, this property is calculated in percent on the website (image height * 100%) / the width of the image (or the width of the container if it coincides with the width of the image), but whatever the picture takes up the entire window, you need to wrap it in a container, in general, the code below. The point of all this is just to show the dies (it means that something must be in them) when the picture is loaded.

 .container{ width: 450px; } .box{ background-color: #444; display: block; position: relative; } img{ height: 100%; width: 100%; position: absolute; } 
 <div class="container"> <div class="box" style="padding-bottom: высота картинки * 100%)/ширину картинки % "> <img src="img/1.jpg"> </div> </div>

  • In fact, it is enough to set the background-color for the image, not forgetting to specify its size in pixels. Containers and paddings are not at all for this. - andreymal
  • I just didn’t want, for some reason, to specify the size of the image in tags or in CSS - Sash Boobs
  • one
    Thank you all for trying to find the answer) - Sash Boobs