From 48f077f0b65cd0785b218a8ce95df1fd99243028 Mon Sep 17 00:00:00 2001
From: liatv <liatvi@wix.com>
Date: Sat, 23 Dec 2023 23:52:18 +0200
Subject: [PATCH 1/2] fix - image / container border pushes image instead of it
 resizing

---
 packages/gallery/src/components/item/imageItem.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/gallery/src/components/item/imageItem.js b/packages/gallery/src/components/item/imageItem.js
index 9230464ba..3cb22ef91 100644
--- a/packages/gallery/src/components/item/imageItem.js
+++ b/packages/gallery/src/components/item/imageItem.js
@@ -59,7 +59,7 @@ class ImageItem extends React.Component {
   }
 
   getImageContainer(imageRenderer, classNames, extraNodes) {
-    const { imageDimensions, id, actions } = this.props;
+    const { id, actions } = this.props;
 
     return (
       <div
@@ -68,7 +68,7 @@ class ImageItem extends React.Component {
         onTouchEnd={actions.handleItemMouseUp}
         key={'image_container-' + id}
         data-hook={'image-item'}
-        style={imageDimensions}
+        style={{ boxSizing: 'border-box' }}
       >
         {imageRenderer()}
         {extraNodes}
@@ -150,7 +150,6 @@ class ImageItem extends React.Component {
                 key={'image_preload_blur-' + id}
                 src={createUrl(GALLERY_CONSTS.urlSizes.RESIZED, GALLERY_CONSTS.urlTypes.LOW_RES)}
                 style={{
-                  ...imageSizing,
                   ...preloadStyles,
                   ...blockDownloadStyles,
                 }}
@@ -166,7 +165,6 @@ class ImageItem extends React.Component {
                 key={'image_preload_main_color-' + id}
                 src={createUrl(GALLERY_CONSTS.urlSizes.PIXEL, GALLERY_CONSTS.urlTypes.HIGH_RES)}
                 style={{
-                  ...imageSizing,
                   ...preloadStyles,
                   ...blockDownloadStyles,
                 }}
@@ -199,7 +197,6 @@ class ImageItem extends React.Component {
           onLoad={this.handleHighResImageLoad}
           loading={this.props.isPrerenderMode ? 'lazy' : 'eager'}
           style={{
-            ...imageSizing,
             ...blockDownloadStyles,
             ...(!shouldRenderHighResImages && preloadStyles),
           }}

From d1f2a72434ec02bb6ba4e3876a0c320bf8386c45 Mon Sep 17 00:00:00 2001
From: liatv <liatvi@wix.com>
Date: Sun, 24 Dec 2023 00:26:42 +0200
Subject: [PATCH 2/2] fix

---
 packages/gallery/src/components/item/imageItem.js | 2 +-
 packages/gallery/src/components/item/itemView.js  | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/gallery/src/components/item/imageItem.js b/packages/gallery/src/components/item/imageItem.js
index 3cb22ef91..96f279441 100644
--- a/packages/gallery/src/components/item/imageItem.js
+++ b/packages/gallery/src/components/item/imageItem.js
@@ -115,7 +115,7 @@ class ImageItem extends React.Component {
       settings && settings.imageProps && typeof settings.imageProps === 'function' ? settings.imageProps(id) : {};
 
     // eslint-disable-next-line no-unused-vars
-    const { marginLeft, marginTop, ...imageSizing } = imageDimensions;
+    const { marginLeft, marginTop } = imageDimensions;
 
     const image = () => {
       const imagesComponents = [];
diff --git a/packages/gallery/src/components/item/itemView.js b/packages/gallery/src/components/item/itemView.js
index ebcd39920..109ab88d7 100644
--- a/packages/gallery/src/components/item/itemView.js
+++ b/packages/gallery/src/components/item/itemView.js
@@ -710,7 +710,6 @@ class ItemView extends React.Component {
 
   getItemWrapperStyles() {
     const { createUrl, options, style, type, offset } = this.props;
-    const { height, width, innerWidth, innerHeight } = style;
     const { innerTop, innerLeft } = offset;
     let styles = {};
     if (type === 'text') {
@@ -732,7 +731,6 @@ class ItemView extends React.Component {
       styles = {
         ...styles,
         background: `url(${createUrl(GALLERY_CONSTS.urlSizes.PIXEL, GALLERY_CONSTS.urlTypes.HIGH_RES)})`,
-        backgroundSize: `${innerWidth}px ${innerHeight}px`,
         backgroundRepeat: 'no-repeat',
         backgroundPosition: `top ${innerTop}px left ${innerLeft}px`,
       };
@@ -741,8 +739,6 @@ class ItemView extends React.Component {
     if (options[optionsMap.behaviourParams.item.content.hoverAnimation] === TILT) {
       styles['--tiltAngleValue'] = options[optionsMap.behaviourParams.item.content.tiltAngleValue];
     }
-    styles.height = height + 'px';
-    styles.width = width + 'px';
     styles.margin = -options[optionsMap.stylingParams.itemBorderWidth] + 'px';
 
     return styles;
@@ -974,6 +970,7 @@ class ItemView extends React.Component {
               this.props.options[optionsMap.layoutParams.info.placement],
               this.props.idx
             ) && { float: 'right' }),
+            height: '100%',
           }}
         >
           {!isItemWrapperEmpty && (