fix(avatar): adjust wide images to fill instead of squish

2026-03-13 10:22:08 +08:00 · 2018-03-28 17:43:36 -04:00
parent 093feac6e4
commit b0f8ca544d
2 changed files with 9 additions and 0 deletions
--- a/core/src/components/avatar/avatar.scss
+++ b/core/src/components/avatar/avatar.scss
@@ -11,4 +11,6 @@ ion-avatar {
 ion-avatar img {
  width: 100%;
  height: 100%;
+
+  object-fit: cover;
 }
--- a/core/src/components/avatar/test/basic/index.html
+++ b/core/src/components/avatar/test/basic/index.html
@@ -35,6 +35,13 @@
          </ion-avatar>
          <ion-label>Item Avatar</ion-label>
        </ion-item>
+
+        <ion-item>
+          <ion-avatar slot="end">
+            <img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </ion-avatar>
+          <ion-label>Wide Avatar</ion-label>
+        </ion-item>
      </ion-content>

  </ion-app>