image carrées pour photo portrait

user/themes/epau-antimatter/css-compiled/template.css

@@ -922,7 +922,7 @@ ul.pagination {
     display: flex !important;
     flex-direction: row;
     flex-wrap: wrap;
-    width: 65%;
+    width: 54%;
     margin: auto; }
     .mozaique_personnes .equipe h3 {
       padding-top: 3rem;
@@ -942,14 +942,14 @@ ul.pagination {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        max-width: 30rem; }
-        .mozaique_personnes .equipe .personne .mozaique .portrait {
-          min-width: 10rem;
-          min-height: 10rem;
-          background: red !important; }
-          .mozaique_personnes .equipe .personne .mozaique .portrait img {
-            max-width: 5rem !important;
-            max-height: 5rem !important; }
+        max-width: 30rem;
+        min-width: 30rem; }
+        .mozaique_personnes .equipe .personne .mozaique .photo {
+          overflow: hidden;
+          width: 15rem !important;
+          height: 15rem !important; }
+          .mozaique_personnes .equipe .personne .mozaique .photo img {
+            width: 100%; }
         .mozaique_personnes .equipe .personne .mozaique .info {
           background-color: #fff;
           display: flex;

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -358,7 +358,8 @@
     flex-wrap: wrap;
     // margin-left: 15%;
     // padding-right: 15%;
-    width: 65%;
+    width: 54%;
+
     margin: auto;
     // justify-items: center;
 
@@ -391,17 +392,24 @@
 
         justify-content: flex-end;
         max-width: 30rem;
+        min-width: 30rem;
 
-        .portrait {
-          min-width: 10rem;
-          min-height: 10rem;
+        .photo {
+          // min-width: 10rem;
+          // min-height: 10rem;
 
           // max-width:50% !important;
-          background: red !important;
+          overflow: hidden;
+          width: 15rem !important;
+          height: 15rem !important;
+          // object-fit: cover;
 
           img {
-              max-width: 5rem !important;
-              max-height: 5rem !important;
+              // maxwidth: 15rem !important;
+              // height: 15rem !important;
+              // background-size: cover;
+              width: 100%;
+
           }
 
         }

user/themes/epau-antimatter/templates/modular/personnes.html.twig

@@ -9,7 +9,7 @@
       <!-- {{ dump(personne) }} -->
       <div class="personne">
         <div class="mozaique">
-            <div class="portait">
+            <div class="photo">
               {% if personne.portrait %}
                 <img src="{{page.media[personne.portrait].url|e }}" alt="photo de {{personne.nom}}" />
               {% endif %}