Image Cropping on Different Devices
As a rule, we can work with three different breakpoints: desktop, tablet, and mobile. In addition to this, there are also different types of image areas. An image area can be fixed in proportion or dynamic in relation to screen width.
- Fixed Proportional Image Areas do not get cropped or change proportions. In these image areas, images with important information should be placed so that nothing gets cut off at any of the breakpoints. An example of such an image could be an image in the content section of an article page.
- Dynamic Image Areas can be cropped horizontally and vertically. These image areas often have a fixed height and are cropped according to the screen width. A common example where this type of image area is used is the so-called hero sections. It is important to consider for these that the motif should preferably be centered in both height and width if it is sensitive to cropping, so that it remains a part of the image area even when the website is visited on devices with smaller screens.
Below are examples of how the different image areas behave on different devices.