Focus point in responsive images
To date, there are several techniques for adapting images for viewing on screens of all sizes. Most of them come down to simple scaling. In this article we will consider a slightly more cunning way - focusing on certain points.
Focal Point is an HTML / CSS framework presented on GitHub by Adam Bradley. One of the easiest ways to work with responsive images is to cut sides that don't fit on the screen. However, you can accidentally crop the usable image space. With the help of Focal Point, you can specify important focus points of the picture that will not be cropped:
')
The principle of operation is quite simple: the whole image is divided into a special grid in the proportion of 12x12:
Now it is necessary to select the point of focus on the image using improvised coordinates. Usually it is the face in the photo. It is necessary to read from the center of the grid; in the example above, the face is located three cells above and three to the right of the center:
Let's go to the code. The markup is quite simple, in the classes of the block the focal-point and the coordinates of the focal point are indicated. The disadvantage of the framework is the need to enclose the image in two divs:
The result is a beautiful and correct scaling of the adaptive image:
Here are two living examples of such responsive images. The final markup is not too bulky, HTML:
CSS:
As for cross-browser compatibility, the method works in all modern browsers, including IE8. If you look deeper into the principle of the framework, then everything turns out to be quite simple: all classes of coordinates of focal points are written in CSS using media queries:
Therefore, in the case of a small number of images that need to be scaled on the site, you can do without the entire Focal Point framework simply by using the necessary part of CSS.
DesignShack website examples.
Focal Point is an HTML / CSS framework presented on GitHub by Adam Bradley. One of the easiest ways to work with responsive images is to cut sides that don't fit on the screen. However, you can accidentally crop the usable image space. With the help of Focal Point, you can specify important focus points of the picture that will not be cropped:
')
The principle of operation is quite simple: the whole image is divided into a special grid in the proportion of 12x12:
Now it is necessary to select the point of focus on the image using improvised coordinates. Usually it is the face in the photo. It is necessary to read from the center of the grid; in the example above, the face is located three cells above and three to the right of the center:
Let's go to the code. The markup is quite simple, in the classes of the block the focal-point and the coordinates of the focal point are indicated. The disadvantage of the framework is the need to enclose the image in two divs:
<div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> The result is a beautiful and correct scaling of the adaptive image:
Here are two living examples of such responsive images. The final markup is not too bulky, HTML:
<div class="column"> <h1>Focal Point</h1> <p>Lorem ipsum...</p> <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt="guy"></div> </div> </div> <div class="column"> <h1>Focal Point</h1> <p>Lorem ipsum...</p> <div class="focal-point right-2 up-2"> <div><img src="couple.jpg" alt="couple"></div> </div> </div> CSS:
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .column { float: left; overflow: auto; padding: 20px; width: 50%; } h1 { text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; } p { margin-bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; } @media all and (max-width: 767px) { p { font-size: 12px; } h1 { font-size: 35px; } } @media all and (max-width: 550px) { h1 { font-size: 23px; } } As for cross-browser compatibility, the method works in all modern browsers, including IE8. If you look deeper into the principle of the framework, then everything turns out to be quite simple: all classes of coordinates of focal points are written in CSS using media queries:
@media all and (max-width: 767px) { /* 4x3 Landscape Shape (Default) */ .focal-point div { margin: -3em -4em; } /* Landscape up (Total 6em) */ .up-3 div { margin-top: -1.5em; margin-bottom: -4.5em; } .right-3 div { margin-left: -6em; margin-right: -2em; } } Therefore, in the case of a small number of images that need to be scaled on the site, you can do without the entire Focal Point framework simply by using the necessary part of CSS.
DesignShack website examples.
Source: https://habr.com/ru/post/161419/
All Articles