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

Fixes that setting `mat-card-image` on a `picture` element doesn't work correctly. Fixes #23649.
angular · Oct 2, 2021 · e9ca125 · e9ca125
1 parent 7c16258
commit e9ca125
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 classes are to handle `mat-card-image` on a `picture` element.
+  display: block;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+  }
 }
 
 .mat-card-footer {