I’ve done a website http://emed.testing.vn.ua and the customer is not satisfied: when loading in chrome, the bar under the slider jumps. The site is on WordPress and loads at once a lot of heavy images.

I need to, well, at least the yellow line under the slider remain in place from the start of the download. The preloader does not roll and you cannot fix the height of the slider. He type changes height when adapting. Tell me, at least approximately, what can be done?

  • Just attach the picture in the yellow square to the parent - sent sentimo
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

To preserve the proportions of the image when resizing the window, you can use the following trick with padding , which will allow you to reserve space for the image without specifying a specific value for the height:

 .parent { padding-bottom: 33.33%; position: relative; width: 100%, height: 0; } .child { background: url('https://satyr.io/1200x768/400') 50% 50%/cover no-repeat #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 
 <div class="parent"> <div class="child"></div> </div>

You can change the size of the window to check in a similar example on jsFiddle .

Having done so, as shown in the example, you reserve a place for the picture before it is loaded and the strip will not jump anywhere. By the way, it does not depend on the browser, as you think.

What happens here: padding-bottom: 33.33%; says that the height of the image refers to its width as one to three. The real size of the image is 1200x768 pixels, but thanks to 50% 50%/cover we see only the central part of the image, after it was proportional to the width of the image.

Why this happens: padding-bottom depends on the width of the block . I repeat, indicating 33.33% percent, we kind of say that we need a height equal to 1/3 of the width. If a 4:3 aspect ratio was needed, then for padding-bottom you would need to specify a value equal to 3/4 3 / 4 * 100% or 75% . If you needed an aspect ratio for a 16:9 image, then for padding-bottom you would need to specify a value equal to
56.25% 9 / 16 * 100% or 56.25% .

Alas, this approach has disadvantages. First, we cannot use the height property with this combination. The height must be equal to 0, so as not to destroy the proportions of the block, and the contents of the block must be absolutely positioned. Secondly, if images with different aspect ratios are used in the slider, then the contents of the pictures, the aspect ratio of which does not coincide with the selected one, will be cut off.

Most sliders normally handle blocks that are designed this way.