How to Resize Images in Magento 1 & 2

You might find it pretty annoying when your product image is covered with white border to make your image square on your Magento website. If that’s the case, you can find solutions for that in this post.

Resize images in Magento 1

Here’s how to customize what color the background is: just add backgroundcolor('000', '000', '000') before the resize() method.

<img src=”
    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail',
        <br/> $_image->getFile())->backgroundcolor('000', '000', '000')->resize(100); ?>” … />

Better yet, get rid of the background using keepFrame(false):

<img src="
    <?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail',
        <br/> $_image->getFile())->keepFrame(false)->resize(100); ?>" width="100″ … />

Resizing after keepFrame(false) will resize the largest dimension. Don’t forget to delete your image height and width attributes (if need be)!

Here are (most of) the places you’ll want to change these:

catalog/product/view/media.phtml
checkout/cart/item/default.phtml
catalog/product/list.phtml

Migrate to Magento 2

Resize images in Magento 2

For Magento 2, you can use the following code to resize your images:

<?php
/**
*
* @var \Magento\Catalog\Model\ProductRepository
*/
protected $_productRepository;

/**
*
* @var \Magento\Catalog\Helper\Image
*/
protected $_productImageHelper;

/**
* @param \Magento\Backend\Block\Template\Context $context
* @param \Magento\Catalog\Model\ProductRepository $productRepository
* @param \Magento\Catalog\Helper\Image $productImageHelper
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Catalog\Model\ProductRepository $productRepository,
\Magento\Catalog\Helper\Image $productImageHelper,
array $data = []
)
{
$this->_productRepository = $productRepository;
$this->_productImageHelper = $productImageHelper;
parent::__construct($context, $data);
}

/**
* resize of the image
* @see \Magento\Catalog\Model\Product\Image
* @param int $width
* @param int $height
* @return $this
*/
public function resizeImage($id, $image_type, $width, $height = null)
{
$product = $this->_productRepository->getById($id);
$resizedImage = $this->_productImageHelper->init($product, $image_type)
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepTransparency(TRUE)
->keepFrame(FALSE)
->resize($width, $height);
return $resizedImage;
}

Here, $_productRepository is an object of Magento\Catalog\Model\ProductRepository class and $_productImageHelper is an object of Magento\Catalog\Helper\Image class.

constrainOnly-> By default it is False. but if we set True that means the image will not bigger than it was.
keepAspectRatio-> By default it is True, that means image height and width will not be contorted.
keepFrame-> keepFrame(False) will remove the background and set the image to desired width/height.
keepTransparency-> By default it is True, that means the image will not lose transparency.

Hope this helps you can create a perfect look for your Magento website.