<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php
/** @var $block \Magento\Catalog\Block\Product\Image */
/** @var $escaper \Magento\Framework\Escaper */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
$width = (int)$block->getWidth();
$height = (int)$block->getHeight();
$paddingBottom = $block->getRatio() * 100;
?>
<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
    <span class="product-image-wrapper">
        <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
            <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
                <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtml($value) ?>"
            <?php endforeach; ?>
            src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
            loading="lazy"
            width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
            height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
            alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
</span>
<?php
$styles = <<<STYLE
.product-image-container-{$block->getProductId()} {
    width: {$width}px;
    height: auto;
    aspect-ratio: {$width} / {$height};
}
.product-image-container-{$block->getProductId()} span.product-image-wrapper {
    height: 100%;
    width: 100%;
}
@supports not (aspect-ratio: auto) { 
    .product-image-container-{$block->getProductId()} span.product-image-wrapper {
        padding-bottom: {$paddingBottom}%;
    }
}
STYLE;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('style', [], $styles, false) ?>
