Good evening. The div has a width of 100% and a background image; you need to make the element's height dynamic, while preserving the proportions of the background. Any ideas?

  • Any ideas. Do not make a picture background - Alexey Ten
  • Is there an alternative? - Riley
  • Not. The background image by definition can not in any way affect the size of the block. You need some element that contains "knowledge" about the proportions of the picture. This is not necessarily the picture itself, maybe something else, but the background image is definitely not suitable for this. - Alexey Ten
  • A tick is not time to put? - Qwertiy ♦

2 answers 2

Instead of using padding-top instead:

 div { background: url(//placehold.it/350x150); background-size: cover; width: 100%; height: 0; padding-top: 42.857%; /* 150/350 */ outline: 1px solid red; } 
 <div></div> 

     background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

    And further customize as needed. In more detail, including about support in old browsers - http://htmlbook.ru/css/background-size

    • How should this help? - Qwertiy ♦
    • The question was: "Any ideas?" I gave an idea. On the issue it is difficult to determine the remaining required parameters. Your answer also uses background-size, it is more expanded, but it will work only in the case when all the pictures are of the same proportions. - labris