From 750ce593fea688b3351e57812a40b24c2c9eb06a Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 18 Sep 2025 10:39:50 +0200 Subject: [PATCH] img fill home diap --- web/themes/custom/reha/dist/css/bundle.css | 32 +++++-- web/themes/custom/reha/reha.theme | 2 + .../scss/pages/home/_home-view-sites.scss | 91 ++++++++++++------- 3 files changed, 81 insertions(+), 44 deletions(-) diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 6dc6a1a..0b1f36d 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/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; } } diff --git a/web/themes/custom/reha/reha.theme b/web/themes/custom/reha/reha.theme index 735384c..8959229 100644 --- a/web/themes/custom/reha/reha.theme +++ b/web/themes/custom/reha/reha.theme @@ -146,5 +146,7 @@ function reha_preprocess_field(&$variables){ array_splice($variables['items'], 1); } } + + } diff --git a/web/themes/custom/reha/scss/pages/home/_home-view-sites.scss b/web/themes/custom/reha/scss/pages/home/_home-view-sites.scss index a0824b0..3eb35cb 100644 --- a/web/themes/custom/reha/scss/pages/home/_home-view-sites.scss +++ b/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{