Browse Source

img fill home diap

ouidade 13 hours ago
parent
commit
750ce593fe

+ 23 - 9
web/themes/custom/reha/dist/css/bundle.css

@@ -1976,6 +1976,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site {
   width: 70%;
+  height: 30vw;
   margin: auto;
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site {
@@ -1983,6 +1984,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   display: flex;
   flex-direction: row;
   margin: auto;
+  height: 100%;
 }
 @media (max-width: 1400px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site {
@@ -2001,29 +2003,41 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site {
   order: 1;
   width: 70%;
+  height: 100%;
 }
 @media (max-width: 900px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site {
     width: 100%;
   }
 }
-.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item {
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image {
+  height: 100%;
+}
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items {
+  height: 100%;
+}
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   position: relative;
+  height: 100%;
 }
-.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item img {
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a {
+  height: 100%;
   width: 100%;
-  object-fit: contain;
-  height: fit-content;
+}
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a img {
+  height: 100%;
+  width: 100%;
+  object-fit: fill;
 }
 @media (max-width: 1500px) {
-  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item img {
+  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item a img {
     width: 100%;
   }
 }
-.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote {
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote {
   position: absolute;
   font-style: italic;
   margin: 0;
@@ -2033,19 +2047,19 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   bottom: 0px;
 }
 @media (max-width: 900px) {
-  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote {
+  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote {
     left: 0;
     top: 0;
     width: 100%;
   }
 }
-.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote p {
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote p {
   margin: 0;
   padding-left: 1rem;
   padding-bottom: 1rem;
 }
 @media (max-width: 900px) {
-  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field__item blockquote p {
+  .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote p {
     font-size: 0.8rem;
   }
 }

+ 2 - 0
web/themes/custom/reha/reha.theme

@@ -146,5 +146,7 @@ function reha_preprocess_field(&$variables){
       array_splice($variables['items'], 1);
     }
   }
+  
+
 }
 

+ 56 - 35
web/themes/custom/reha/scss/pages/home/_home-view-sites.scss

@@ -38,7 +38,9 @@
 
             .node-type-site{
                 width: 70%;
+                height: 30vw;
                 margin: auto;
+
                 .entete_site{  
                     background-color: white;
                     // height: 520px;
@@ -46,6 +48,7 @@
                     display: flex;
                     flex-direction: row;
                     margin: auto;
+                    height: 100%;
                 @media(max-width: 1400px){
                     width: 100%;
                     display: flex;
@@ -60,48 +63,66 @@
                     .image-site{
                         order: 1;
                         width: 70%;
+                        height: 100%;
                         @media(max-width: 900px){
                             width: 100%;
                         }
-                        .field__item{
-                            display: flex;
-                            flex-direction:column;
-                            align-items: flex-end;
-                            position: relative;
-                            img {
-                                // height: 520px;
-                                width: 100%;
-                                object-fit: contain;  
-                                height: fit-content; 
-                                // object-fit: cover;
-                                // max-height: 200px;   
-                                @media(max-width: 1500px){
-                                    width: 100%;
-                                }                 
-                            }
-                            blockquote{
-                                position: absolute;
-                                font-style: italic;
-                                margin: 0;
-                                width: 20vw;
-                                z-index: 900;
-                                right: -20vw;
-                                bottom: 0px;
-                                @media(max-width: 900px){
-                                    left: 0;
-                                    top: 0;
-                                    width: 100%;
-                                }
-                                p{
-                                    margin: 0;
-                                    padding-left: 1rem;
-                                    padding-bottom: 1rem;
-                                    @media(max-width: 900px){
-                                        font-size: 0.8rem;
+                        .field--type-image{
+                            height: 100%;
+                            .field__items{
+                                height: 100%;
+                                .field__item{
+                                    display: flex;
+                                    flex-direction:column;
+                                    align-items: flex-end;
+                                    position: relative;
+                                    height: 100%;
+                                    a{
+                                        height: 100%;
+                                        width: 100%;
+                                        img {
+                                            height: 100%;    
+                                            // height: 520px;
+                                                width: 100%;
+                                                // height: 100%;
+                                                object-fit: fill;  
+                                                // height: fit-content; 
+                                                // object-fit: cover;
+                                                // max-height: 200px;   
+                                                @media(max-width: 1500px){
+                                                    width: 100%;
+                                                }                 
+                                            
+                                        }
+                                    }
+                                    
+                                   
+                                    blockquote{
+                                        position: absolute;
+                                        font-style: italic;
+                                        margin: 0;
+                                        width: 20vw;
+                                        z-index: 900;
+                                        right: -20vw;
+                                        bottom: 0px;
+                                        @media(max-width: 900px){
+                                            left: 0;
+                                            top: 0;
+                                            width: 100%;
+                                        }
+                                        p{
+                                            margin: 0;
+                                            padding-left: 1rem;
+                                            padding-bottom: 1rem;
+                                            @media(max-width: 900px){
+                                                font-size: 0.8rem;
+                                            }
+                                        }
                                     }
                                 }
                             }
                         }
+
                         
                     }
                     .infos-content-site{