diff --git a/packages/gallery/src/components/item/imageItem.js b/packages/gallery/src/components/item/imageItem.js index 9230464ba..96f279441 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 (
{imageRenderer()} {extraNodes} @@ -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 = []; @@ -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), }} 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 && (