I'm struggling to minimize the frame width and height for the product base image gallery (Fotorama).

I have inspected the browser code and noticed that if I change the following width and height the related Fotorama Frame size change however, did not found the actual location to customized the white border size (width and height):

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

Basically when I change the above width: 707px; height: 707px; through browser inspect I can see the changes but no where found the actual file or location to change the value.

2 Answers 2


In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
    <image id="product_page_image_medium" type="image">

Please Change Option Value in


<script type="text/x-magento-init">
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
            "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
            "options": {
                "maxheight": "700", // Add your value here


  • Thanks Moin Malek, it's only change the base image size not the frame or white border width & height. My only concern is to minimised the white extra space not the image size...
    – Alam
    Nov 1, 2017 at 8:15
  • Hello @Alam Please Find edited answer
    – Moin Malek
    Nov 1, 2017 at 8:51
  • Thank you so much for your suggested code it is working for the height but not width. I wanted H: 515 and W: 515. Very appreciated.
    – Alam
    Sep 5, 2018 at 10:27
  • @Alam : did you get the soln of width also. i am facing the same issue Nov 20, 2019 at 22:56

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": {
                "something": "value",
                "maxheight": "700" // Add your value here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.