In magento2 product page, the image gallery is rendered by fotorama.

The image size is exactly the same as the one upload to product.

Is it possible to resize all the image to the same size/ratio?


  • 1
    You can set image sizes for product page and other pages in etc/view.xml
    – Jarnail S
    Jan 25 '17 at 5:14
  • Do you have any updates of this? Apr 13 '18 at 8:55

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">
  • this doesn't work
    – bourax
    Feb 23 '18 at 11:00
  • belfort1, if xml has the configuration, it should work at least. But for him images are not resizing at all. They remain same as uploaded image. Jun 24 '18 at 3:44

Use this way to resize your image :-

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); productImage = $_imageHelper->init($_product, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(400)->getUrl();

add this in your etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="Sample\Code\Model\Product\Image" />

add this in Sample\Code\Model\Product\Image

 namespace Sample\Code\Model\Product;

     * Class Image
     * @package Sample\Code\Model\Product
    class Image extends \Magento\Catalog\Model\Product\Image
        protected function _construct () {
// set the quality of the image raging form 0 to 100
            $this->_quality = 100;
  • it will work fine if any quires let me know
    – mohith
    May 3 '19 at 12:04

Override gallery.phtml in your theme -> Magento_Catalog/templates/product/view/gallery.phtml

        foreach ($block->getGalleryImages() as $image) { ?>

                <?php if ($block->isMainImage($image)): ?>

                    <img src="<?php echo $image->getData('large_image_url') ?>">
                <?php endif; ?>
                <?php if ((!$block->isMainImage($image))): ?>

                    <img src="<?php echo $image->getData('large_image_url') ?>">
                <?php endif; ?>

        <?php } ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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