There is a block with a picture with a given background image and a minimum height. He is interested in how to use styles so that the height of the picture is adjusted to the screen when it is increased (the min-height changed), i.e. in fact, that the picture with the numbers was not hidden (350x150) behind the block, but was always logically located in the center, was the full width and kept proportions on any screen resolutions. Feedl

 .background { background-image: url(http://placehold.it/350x150); background-size: cover; height: 1px; min-height: 250px; } 
 <div class="background"></div>

Well, where is the possible duplicate? the questions are completely different - I need to adjust the height of the block to the screen, i.e. increased and decreased depending on the screen size. Unfortunately, so far no universal solution has been found.

  • Ie, do you want the picture to always be in the center of the screen, regardless of the evo? - vov4ok
  • background-size: 100% 100%; - HamSter
  • one
    so or not? jsfiddle.net/6xzyokuh/1 - Lieutenant Jim Dangle
  • @Lieutenant Jim Dangle I want when I zoom in on the screen so that the height of the picture also increases, and does not remain the same, because on some resolutions doesn't look very good - Vasya
  • one
    How about background-position: 50% 50%; ? - Sasha Omelchenko

2 answers 2

Found a solution that suits me completely. Feedl

 .background { box-sizing: border-box; background: url(http://mobidevices.ru/images/2017/01/Nintendo-Switch-1.jpg) no-repeat 50% 50%; background-size: contain; height: 0; width: 100%; padding-bottom: 66.6666666666%; /* H / W * 100% = 66.67 */ } 
 <div class="background"></div>

  • padding-bottom: 66.6666666666%; looks great ... - Yuri
  • @Yuri is the principle itself and it is specifically for this picture and with max accuracy. I mostly use standard 1920 to 1080, which are divided into more beautiful numbers - Vasya

Apply the background-size: contain; property background-size: contain;

 .background { background: url("https://mobidevices.ru/images/2017/01/Nintendo-Switch-1.jpg") no-repeat 50% / contain; height: 800px; width: 100%; } 
 <div class="background"></div>

  • unfortunately, with background-size: contain; the background begins to repeat - this is not a universal way .. - Vasya
  • @ Vasya and background-repeat: no-repeat add - no luck? - Vadizar
  • one
    @ Vasya wrote you an updated example with all the properties. - Vadizar
  • Thanks, managed to achieve a result, but it is not final, because due to height: 800px; intervals without background are obtained from above and below - Vasya
  • one
    @ Vasya then apply background: url (" mobidevices.ru/images/2017/01/Nintendo-Switch-1.jpg" ) no-repeat 50% / cover; - Vadizar