Background size: the cover does not work?

Question

This is my page http://inogroup.it/preload/index.htm

Image field width responsive

How to adjust height to be responsive? How is 50% of the screen?

If I make this change:

.pattern{ background-size: contain; margin-bottom:25px; width:100%; height:50%; } 

he does not work

Many thanks!

Answer 1

background-size: should appear AFTER the background: I do not know if this is true for all browsers, but this is definitely a Chrome feature that can drive you crazy.

Answer 2

The div height can be set using the css height or (by default) the height of its children. Since images are set as background images, the div cannot determine the height from which it should be, and there is no pure CSS method to adjust the height of the div to fit the size of the background image. What you can do is set the background images to be placed in the center of the div and have the background size as the cover:

 .pattern-container .pattern { background-size: cover; background-position: 50% 50%; <!-- other rules here --> } 

Positioning background images as 50% 50% vertically and horizontally centers it in the containing div regardless of the size of the div. However, the image itself may be cropped around the edges if the aspect ratio of the div is less than the aspect ratio of the image (for example, if the div is 30 pixels wide and 10 pixels high, and the image has 40 pixels wide and 10 pixels high, then the image will lose 5 pixels on both sides).

Answer 3

To determine the background image, use the background-image property.

So it won't work

<img class="image" style="background: url(image.jpg);" />

.image { background-size: cover; }

because the background is an abbreviated code and accepts default values ​​for all the missing parameters.

But if you do it

<img class="image" style="background-image: url(image.jpg);" />

.image { background-size: cover; }

This is the solution to the problem.

Answer 4

Image boxes are responsive, but that does not mean the corresponding images. For a more flexible and dynamic structure, I recommend using a framework that does your work, like Bootstrap.

In the latest version of Bootstrap, you can use the following code to make a responsive image (both in width and in height):

 <img src="images/my_img" class="img-responsive" /> 

For this to work, you will need to download the latest version of Bootstrap from your site ( http://getbootstrap.com/ ) and a link to your code.