如何在 Magento 2 中调整产品图像大小

产品图片尺寸是一个很好的属性，可以通过产品细节让您的商品更贴近消费者。因为在网上购物时，顾客无法真正触摸到你的商品，他们都是通过你发布的描述和你上传的产品图片来感受的。形象越美丽，他们的欲望就越多。

而尺寸的标准是你需要学习的主要特征之一。那么如何更改产品图片尺寸以适合您的页面尺寸。关于Magento 2 图像调整大小的本主题将通过详细说明向您展示如何执行此操作。

在 Magento 2 中更改产品图像尺寸的简单方法

• 方法1：更改HelloWorld块中的产品图片大小
• 方法2：更改模板文件中的产品图片尺寸

HelloWorld方法一：批量更改产品图片

在 Magento 2 中调整图像大小的第一种方法是通过HelloWorld 块。

您将使用 module 的块类，然后可能在模块的块类的构造函数中注入和类Example_HelloWorld的对象。\Magento\Catalog\Model\ProductRepository\Magento\Catalog\Helper\Image

app/code/Example/HelloWorld/Block/HelloWorld.php

<?php
namespace Example\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{    
    protected $_productRepository;
    protected $_productImageHelper;
        
    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);
    }
    
    public function getProductById($id)
    {
        return $this->_productRepository->getById($id);
    }
    
    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }
    
    /**
     * Schedule resize of the image
     * $width *or* $height can be null - in this case, lacking dimension will be calculated.
     *
     * @see \Magento\Catalog\Model\Product\Image
     * @param int $width
     * @param int $height
     * @return $this
     */
    public function resizeImage($product, $imageId, $width, $height = null)
    {
        $resizedImage = $this->_productImageHelper
                           ->init($product, $imageId)
                           ->constrainOnly(TRUE)
                           ->keepAspectRatio(TRUE)
                           ->keepTransparency(TRUE)
                           ->keepFrame(FALSE)
                           ->resize($width, $height);
        return $resizedImage;
    }    
}
?>

当您将产品基础图像的大小调整为精确的高度和宽度时，请记住约束、长宽比和透明度需要正确。

现在，您可以按照以下示例加载产品，然后更改产品的图像并显示它。这里，produt_base_image使用 来作为图像 ID。

<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);

//Get product object by SKU
// $sku = 'PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $block->resizeImage($product, 'product_base_image', $width, $height)->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />

方法二：更改模板文件中的产品图片

除了自定义 HelloWorld 块之外，您还可以更改模板 (.phtml) 文件中的产品图像。使用下面的代码片段并在模板文件中运行它。

<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);

//Get product object by SKU
// $sku = 'PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $_imageHelper
                        ->init($product, $imageId)
                        ->constrainOnly(true)
                        ->keepAspectRatio(true)
                        ->keepTransparency(true)
                        ->keepFrame(false)
                        ->resize($width, $height)
                        ->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />