amp;B Collection Casual W Zara Skirt Boutique Rq4FHR

Developers. You know how they are. Super smart, but missing the ability to pay attention to visual nuances. But when we leave it for them to decide, we find the world stretched, squeezed and just plain weird.

The main design rule developers have to know about photos isto Zara Casual Collection W Skirt amp;B Boutique NEVER EVERchange the proportions of an image. No matter what.

But this rule doesn’t go well with responsive design. When implementing card design, the images within the responsive card elements usually keep a fixed height, but their width changes according to the grid.

If it were up to our developers, they would let the images just fill the display area, but our job as designers is to make sure they don’t.

Instructing developers on how to take care of displaying the images correctly is kind of tricky, but having recently done that, we have decided to share the instructions to make your life easier.

Image display area and source image

Dear dev team!It’s super critical for the quality of design that we keep the proportions of the images displayed on our card elements. In order to do that, we have to make sure that the images are shown in a responsive way.

Firstly, we must check the source image proportions and compare them with the proportions of the image display area.

Let’s assume that the source image size is 505 X 354px and the display area is 414 X 218px. When we calculate the ratio of these two sizes, we find that the source image proportions ratio (width/height) is 1.42 and display area proportions ratio is 1.90.

Masking instructions

If the display area ratio is bigger, this means that we should fit the width of the image to the display size. By doing this, we will have a bigger image height than the place we have to show. In this case we should mask the image to display only the relative area, and thus align the image to vertical center.

On the other hand, if the display area ratio is smaller, then we should fit the source image height to be fully shown on the display area, align the image to horizontal center and then mask the image from right and left accordingly.

Next time you need your developers to take care of images correctly, just send them this post.