ENGCOM-8251: Bugfix/wrong size attributes in image with border #30139

 - Merge Pull Request #30139 from GrimLink/magento2:bugfix/wrong-size-attributes-in-image_with_border
 - Merged commits:
   1. 395907d
   2. 5092948
   3. fe5be17
   4. 1adc538
   5. 3d609a9
   6. 7fd7a68

Author: magento-engcom-team

app/code/Magento/Catalog/etc/view.xml

@@ -8,9 +8,5 @@
 <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
     <vars module="Magento_Catalog">
         <var name="product_image_white_borders">1</var>
-        <!-- Variable to enable lazy loading for catalog product images without borders.
-        If you enable this setting your small size images without borders may be stretched in template.
-        So be sure you have correct image sizes. -->
-        <var name="enable_lazy_loading_for_images_without_borders">0</var>
     </vars>
 </view>

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -8,16 +8,6 @@
 /** @var $block \Magento\Catalog\Block\Product\Image */
 /** @var $escaper \Magento\Framework\Escaper */
 /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
-/**
- * Enable lazy loading for images with borders and if variable enable_lazy_loading_for_images_without_borders
- * is enabled in view.xml. Otherwise small size images without borders may be distorted. So max-width is used for them
- * to prevent stretching and lazy loading does not work.
- */
-$borders = (bool)$block->getVar('product_image_white_borders', 'Magento_Catalog');
-$enableLazyLoadingWithoutBorders = (bool)$block->getVar(
-    'enable_lazy_loading_for_images_without_borders',
-    'Magento_Catalog'
-);
 $width = (int)$block->getWidth();
 $paddingBottom = $block->getRatio() * 100;
 ?>
@@ -29,13 +19,8 @@ $paddingBottom = $block->getRatio() * 100;
             <?php endforeach; ?>
             src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
             loading="lazy"
-            <?php if ($borders || $enableLazyLoadingWithoutBorders): ?>
-                width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
-                height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
-            <?php else: ?>
-                max-width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
-                max-height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
-            <?php endif; ?>
+            width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
+            height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>
 <?php

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less

@@ -117,13 +117,12 @@
     .product-image-photo {
         bottom: 0;
         display: block;
-        height: auto;
         left: 0;
         margin: auto;
-        max-width: 100%;
         position: absolute;
         right: 0;
         top: 0;
+        width: auto;
     }
 
     //

app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less

@@ -98,13 +98,12 @@
     .product-image-photo {
         bottom: 0;
         display: block;
-        height: auto;
         left: 0;
         margin: auto;
-        max-width: 100%;
         position: absolute;
         right: 0;
         top: 0;
+        width: auto;
     }
 
     //