How to position Fotorama in Magento 2 and avoid white space around the image

Fotorama is a jQuery plugin which is used in Magento pretty often. Unfortunately, when it comes to customization, it gets tough.

In this case the problem was as follows: product images (single product page) are shown with Fotorama plugin, but as soon as the image is not square or has a poor resolution, Fotorama adds on annoying white space around it, making image appear something like that:

But we would like to see it like this:

To put it simply, the image must always start from the top of the fotorama stage.

The solution is simpler than it seems. All it requires is some CSS and XML changes.

First, search for view.xml file in app/design/frontend/your_vendor/your_name/etc/view.xml. The location of the file might be different, so check that with your setup. All you need to change there is default product image size. In the file search for tags with ids: “product_page_image_medium”“product_page_main_image”, “product_page_main_image_default” and comment out/delete tag and its contents.

After that edit CSS/LESS file within your folder.

.product .fotorama__stage__frame .fotorama__img {
       top: 0 !important;
       transform: none !important;
       -webkit-transform: none !important;
       position: static;
       margin-top: auto !important;

Let us know if it works!


2 thoughts on “How to position Fotorama in Magento 2 and avoid white space around the image

  1. This semi-works. It has no solution for the magnifier (which isn’t align anymore since we do a top 0 here so we need to apply that also to the previewer. And it still leaves a big space on the bottom


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s