fix(material/card): handle picture element as mat-card-image (#23678)

Fixes that setting `mat-card-image` on a `picture` element doesn't work correctly. Fixes #23649. (cherry picked from commit 267b03a)
angular · Jan 18, 2022 · 761f9f2 · 761f9f2
1 parent 805eee8
commit 761f9f2
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/material/card/card.scss b/src/material/card/card.scss
@@ -73,6 +73,14 @@ $header-size: 40px !default;
 .mat-card-image {
   width: calc(100% + #{$padding * 2});
   margin: 0 (-$padding) 16px (-$padding);
+
+  // The following properties are to handle `mat-card-image` on a `picture` element.
+  display: block;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+  }
 }
 
 .mat-card-footer {