diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
index cc1a7276c70b8..1877a0fe2636f 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
@@ -12,7 +12,7 @@ $width = (int)$block->getWidth();
 $paddingBottom = $block->getRatio() * 100;
 ?>
 <span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
-    <span class="product-image-wrapper">
+    <span class="product-image-wrapper product-image-wrapper-padding">
         <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
             <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
                 <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtml($value) ?>"
@@ -23,29 +23,3 @@ $paddingBottom = $block->getRatio() * 100;
             height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>
-<?php
-$styles = <<<STYLE
-.product-image-container-{$block->getProductId()} {
-    width: {$width}px;
-}
-.product-image-container-{$block->getProductId()} span.product-image-wrapper {
-    padding-bottom: {$paddingBottom}%;
-}
-STYLE;
-//In case a script was using "style" attributes of these elements
-$script = <<<SCRIPT
-prodImageContainers = document.querySelectorAll(".product-image-container-{$block->getProductId()}");
-for (var i = 0; i < prodImageContainers.length; i++) {
-    prodImageContainers[i].style.width = "{$width}px";
-}
-prodImageContainersWrappers = document.querySelectorAll(
-    ".product-image-container-{$block->getProductId()}  span.product-image-wrapper"
-);
-for (var i = 0; i < prodImageContainersWrappers.length; i++) {
-    prodImageContainersWrappers[i].style.paddingBottom = "{$paddingBottom}%";
-}
-SCRIPT;
-
-?>
-<?= /* @noEscape */ $secureRenderer->renderTag('style', [], $styles, false) ?>
-<?= /* @noEscape */ $secureRenderer->renderTag('script', ['type' => 'text/javascript'], $script, false) ?>
diff --git a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less
index f7be4a9edb13c..b05dd2d1d5f2a 100644
--- a/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less
+++ b/app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less
@@ -103,6 +103,7 @@
 
     .product-image-container {
         display: inline-block;
+        width: 240px;
         max-width: 100%;
     }
 
@@ -114,6 +115,10 @@
         z-index: 1;
     }
 
+    .product-image-wrapper-padding {
+        padding-bottom: 125%;
+    }
+
     .product-image-photo {
         bottom: 0;
         display: block;
diff --git a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less
index 43694a8197963..1cf473f989ead 100644
--- a/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less
+++ b/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less
@@ -84,6 +84,7 @@
 
     .product-image-container {
         display: inline-block;
+        width: 240px;
         max-width: 100%;
     }
 
@@ -95,6 +96,10 @@
         z-index: 1;
     }
 
+    .product-image-wrapper-padding {
+        padding-bottom: 125%;
+    }
+
     .product-image-photo {
         bottom: 0;
         display: block;