Merge pull request #83 from adobecom/MWPW-133908

fix: Sets cards images as background images (MWPW-133908)
adobecom · Jul 24, 2023 · 9a88973 · 9a88973
2 parents bac0c3d + d303afe
commit 9a88973
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 15 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 6/30/2023, 14:16:26
+ * Chimera UI Libraries - Build 7/21/2023, 14:41:31
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -50184,8 +50184,10 @@ var OneHalfCard = function OneHalfCard(props) {
             'div',
             {
                 'data-testid': 'consonant-OneHalfCard-img',
-                className: 'consonant-OneHalfCard-img' },
-            _react2.default.createElement('img', { src: image, alt: altText, 'aria-label': altText, loading: 'lazy' }),
+                className: 'consonant-OneHalfCard-img',
+                style: { backgroundImage: 'url("' + image + '")' },
+                role: altText && 'img',
+                'aria-label': altText },
             hasBanner && !disableBanners && _react2.default.createElement(
                 'span',
                 {

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/less/components/consonant/cards/one-half.less b/less/components/consonant/cards/one-half.less
@@ -44,11 +44,6 @@
             border-top-right-radius: 4px;
             text-align: center;
             overflow: hidden;
-
-            img {
-                width: 100%;
-                min-height: 100%;
-            }
         }
 
         &-videoIco {

diff --git a/react/src/js/components/Consonant/Cards/OneHalf.jsx b/react/src/js/components/Consonant/Cards/OneHalf.jsx
@@ -261,8 +261,10 @@ const OneHalfCard = (props) => {
             id={id}>
             <div
                 data-testid="consonant-OneHalfCard-img"
-                className="consonant-OneHalfCard-img">
-                <img src={image} alt={altText} aria-label={altText} loading="lazy" />
+                className="consonant-OneHalfCard-img"
+                style={{ backgroundImage: `url("${image}")` }}
+                role={altText && 'img'}
+                aria-label={altText}>
                 {hasBanner && !disableBanners &&
                 <span
                     data-testid="consonant-OneHalfCard-banner"