Present Any Image Without Breaking The UI

Simple concept that goes for both web and mobile that will not break the UI regardless of the image dimensions, and will keep the image’s aspect ratio.

Photo by Markus Spiske on Unsplash

As a web or mobile developer, you regularly need to present some kind of image on the UI. Sometimes it’s an asset that does not change (yet), sometimes it is the user that uploads the image — in which case you can expect any size ranging from favicon to billboard. Regardless, as a good engineer you need to take care that whatever the image resolution, the UI will not break if the image is changed in the future, with one with a different resolution. Because it will be changed. Also, you have to keep the image’s aspect ratio, and make sure it is not stretched.

Most common mistake that I see made is that the image is limited only by width, and this works well with the perfectly square image the developers are testing with.

It works on my machine

However, once you let the user upload the image:

Hey, we uploaded our new tall logo, but it pushes the text to the right

If you try to fix this by limiting height, not much time will go by before:

The designer created a wider logo, but now the title is almost in the middle. We want it left aligned with smaller image

As long as you let the image dictate the width or height, you’re never going to achieve consistent UI — it will always break for taller or wider images.

This brings us to rule number one: set both the width and height of the image. You can proceed to make it responsive, or make it rectangle for bigger screens and square for mobile. Doesn’t matter. The only thing that matters is that the rectangle where the image is placed is limited both by width and height.

However, not all images will fit perfectly in the rectangle you reserve for them. Precisely the last one, it’s a bit wider, so it obviously won’t fit in the square we have reserved for the logo. If we place such image in a rectangle it does not fit in, the image will become stretched, pixelated, or just a very small and unmeaningful part of it will be shown.
This brings us to the second rule: you have to choose whether to fill the whole rectangle (but cut off part of the image), or fit the whole image into the rectangle (but have empty spaces within), as shown in the following 2 screenshots.

Whole rectangle is filled, but parts of the image are cut off

Whole image is shown, but parts of the rectangle reserved for the image are blank

Whether you choose fit or fill depends on the context and the type of images you show.

Conclusion

The solution of always limiting the image by width and height, and then choosing fit or fill won’t hold you down or add substantial time to the development of your task. What it would add is value as you can change the image in future to whatever image you like. The users will also be free to upload any image with any resolution they want — the UI won’t break, as the rectangle is already responsive, limited by width and height, and the image is always inside the rectangle. And you won’t get support tickets for boring bugs such as “cards on UI are not aligned”, “the UI breaks if certain images are uploaded” or “uploaded image is stretched and pixelated”.