make center round crop on team images

Author: afrendeiro

assets/css/style.css

@@ -66,3 +66,23 @@ table {
 [data-bs-theme="dark"] .logo-dark {
   display: inline-block;
 }
+
+/* Make sure the wrapper constrains the image */
+.avatar{
+  width: min(384px, 95%);
+  height: auto;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 auto 0.75rem;
+}
+
+/* Force the image to fill the wrapper and crop */
+.avatar > img{
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;   /* prevents unexpected max-width constraints */
+  display: block;
+  object-fit: cover;
+  object-position: 50% 20%;     /* crop upwards */
+}

templates/team.html

@@ -14,12 +14,14 @@ <h3>{{ title }}</h3>
                             <div class="card text-center col-sm-6 col-md-3 mb-3">
                                 <div class="card-body">
                                     <h5 class="card-title">{{ member.name }}</h5>
-                                    <img
-                                        class="card-img-top"
-                                        tabindex="0"
+                                    <div class="avatar">
+                                        <img
                                         src="{{ member.photo }}"
                                         alt="{{ member.photo_alt }}"
-                                        style="width: 90%">
+                                        tabindex="0"
+                                        loading="lazy"
+                                        decoding="async">
+                                    </div>
                                     <!-- <img src="{{ member.photo }}" alt="{{ member.name }}" > -->
                                     <p class="card-text">{{ member.role }}
                                         <br>