Adaptive Background Images
One of the main tasks in adaptive layout is scaling of images (including background ones) so that they are correctly displayed on devices with different screen resolutions.
With pictures in the img tag, everything is simple: when you set the width in percent, the height will be scaled automatically. However, this method cannot be applied to the background image.
')
This trick is to set the percentage of the padding of the element. For the first time the method was published in the old article of the blog A List Apart , but it still works well.
Suppose there is a background image of 800 by 450 pixels, and you need to make it a background with a fixed aspect ratio of 16: 9. In the code below, px is used for indents, but everything will work with em . There is also an HTML5 element figure, for its correct operation in older browsers, you can use HTML5 shiv .
Demonstration
The resulting element is scaled as it should, but if you add a background image, the result will not be very good. Use the background-size attribute : cover . Unfortunately, this method does not work in Internet Explorer 8. To solve this problem, position the background using background-position . The background image must be at least equal to the max-width of the element. In the opposite case, the picture will be cropped.
Demonstration
Suppose there is a large background image that looks great on the desktop. But on a mobile device it will be too small, so the correct solution would be to reduce the width of the background.
For example, a picture of 800 by 200 pixels (4: 1) on a small screen, with a width of 300 pixels, should decrease to 150 pixels (2: 1). Calculate the height and padding-top attributes:
The figure shows the aspect ratio of the background image with different widths. The slope of the graph (slope) corresponds to the padding-top attribute, the initial height (start height) to the height attribute. The result is the code:
Demonstration
The padding-top and height attributes can be calculated automatically using preprocessors such as SCSS . An example of this is:
Examples are taken from the article voormedia.com .
With pictures in the img tag, everything is simple: when you set the width in percent, the height will be scaled automatically. However, this method cannot be applied to the background image.
Fixed aspect ratio
')
This trick is to set the percentage of the padding of the element. For the first time the method was published in the old article of the blog A List Apart , but it still works well.
Suppose there is a background image of 800 by 450 pixels, and you need to make it a background with a fixed aspect ratio of 16: 9. In the code below, px is used for indents, but everything will work with em . There is also an HTML5 element figure, for its correct operation in older browsers, you can use HTML5 shiv .
<div class="column"> <figure class="fixedratio"></figure> </div> div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ } Demonstration
Add a background
The resulting element is scaled as it should, but if you add a background image, the result will not be very good. Use the background-size attribute : cover . Unfortunately, this method does not work in Internet Explorer 8. To solve this problem, position the background using background-position . The background image must be at least equal to the max-width of the element. In the opposite case, the picture will be cropped.
<div class="column"> <figure class="fixedratio"></figure> </div> div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } Demonstration
Rubber aspect ratio
Suppose there is a large background image that looks great on the desktop. But on a mobile device it will be too small, so the correct solution would be to reduce the width of the background.
For example, a picture of 800 by 200 pixels (4: 1) on a small screen, with a width of 300 pixels, should decrease to 150 pixels (2: 1). Calculate the height and padding-top attributes:
The figure shows the aspect ratio of the background image with different widths. The slope of the graph (slope) corresponds to the padding-top attribute, the initial height (start height) to the height attribute. The result is the code:
<div class="column"> <figure class="fluidratio"></figure> </div> div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } Demonstration
Using SCSS to calculate
The padding-top and height attributes can be calculated automatically using preprocessors such as SCSS . An example of this is:
/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); } Examples are taken from the article voormedia.com .
Source: https://habr.com/ru/post/157817/
All Articles