Magento 2 更改产品图像大小

产品图片大小是使您的商品与产品详细信息更贴近消费者的良好属性。因为在网上购物中，客户无法真正触摸您的商品，他们都会通过您发布的描述和您上传的产品图片感受到。形象越美丽，他们就越渴望。

大小的标准是你需要学习的主要角色之一。因此，如何更改产品图像大小以适应页面大小。本主题如何在Magento 2中更改产品图像大小将显示您使用特定说明进行操作。

在Magento 2中更改产品图像大小的概述

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

方法1：在HelloWorld块中更改产品图像

首先，我将向您展示在使用HelloWorld块时自定义产品图像大小的方法。

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

app/code/Mageplaza/HelloWorld/Block/HelloWorld.php

<?php
namespace Mageplaza\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();?>" />

方法2：更改模板文件中的产品图像

除了自定义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();?>" />

如果您仍然遇到任何问题，请对此主题发表评论，我们会尽快为您提供帮助。