Fix image proportions for overlay images due to air-helper 3.1.1, T-2…

…3188
digitoimistodude · Dec 3, 2024 · eeaf106 · eeaf106
1 parent f5297f2
commit eeaf106
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ### [Unreleased]
 
 * Fix body styles leaking to wp-admin
+* Fix img proportions fallback for images that have width and height set, T-23188
+* Fix image proportions for overlay images due to air-helper 3.1.1, T-23188
 
 ### 9.4.6: 2024-11-19
 

diff --git a/css/dev/global.css b/css/dev/global.css
diff --git a/css/dev/gutenberg-editor-styles.css b/css/dev/gutenberg-editor-styles.css
diff --git a/css/prod/global.css b/css/prod/global.css
diff --git a/css/prod/gutenberg-editor-styles.css b/css/prod/gutenberg-editor-styles.css
diff --git a/sass/gutenberg/formatting/_img.scss b/sass/gutenberg/formatting/_img.scss
@@ -7,6 +7,10 @@
 }
 
 img {
-  height: auto;
   max-width: 100%;
 }
+
+/* For images that have width and height set, T-23188 */
+img[width][height] {
+  height: auto;
+}
diff --git a/sass/helpers/_images.scss b/sass/helpers/_images.scss
@@ -1,7 +1,8 @@
 // Styling background-images
 // For custom sized image background, use: class="image image-background"
 // For bg as layer, use: class="image image-background image-background-layer"
-.image-background > img {
+.image-background > img,
+.image-background > img[width][height] {
   object-fit: cover;
 }
 
@@ -11,6 +12,7 @@
 }
 
 .image-background > img,
+.image-background > img[width][height],
 .image-background-layer {
   height: 100%;
   left: 0;