I use a block of the following form <div class="wrappmainslide"></div>

I use the following style:

 .wrappmainslide{ width: 100%; height: 636px; background-image: url(../img/mainslide.png); background-size: contain; position: relative; overflow: hidden; }

The height is set based on the height of the image.

Application height: auto; here does not fit. When you change the size of the window, the height of the block remains unchanged, and the picture repeats. How to adapt it?

  • background-size: cover ? - lexxl
  • it's about block height, not background-size - zkolya
  • Use @media all and (max-width: width) {.wrappmainslide {height: your height; }} and so on for all devices and screen sizes - UserX
  • Is the aspect ratio of the picture fixed? Can you specify which one? - Andrey Fedorov
  • @AndreyFedorov. yes she is 1680 to 636 - zkolya

1 answer 1

Here is the working code. The padding-top value is the quotient of the height divided by the width.

 * { padding: 0; margin: 0; } div { background: url(http://beerhold.it/1680/636) center center; background-size: cover; width: 100vw; padding-top: 37.87514285%; } 
 <div></div>