diff --git a/src/style/molecules/_house.scss b/src/style/molecules/_house.scss index 1b20fa5..074eda5 100644 --- a/src/style/molecules/_house.scss +++ b/src/style/molecules/_house.scss @@ -91,8 +91,8 @@ border-radius: 8px; } + // Aspect-ratio fallback @supports not (aspect-ratio: auto) { - position: relative; overflow: hidden; padding-top: 66.66%; height: 0; @@ -101,25 +101,25 @@ picture { height: 100%; border-radius: 0; + + // Aspect-ratio fallback + @supports not (aspect-ratio: auto) { + position: absolute; + width: fit-content; + top: 0; + left: 50%; + height: 100%; + transform: translateX(-50%); + } } img { display: block; - width: calc(100% + 2px); - height: calc(100% + 2px); - object-fit: cover; - transform: scale3d(1.125, 1.125, 1.125); + width: 100%; + height: 100%; + object-fit: contain; + transform: scale3d(1.1, 1.1, 1.1); transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart); will-change: transform; - - @supports not (aspect-ratio: auto) { - position: absolute; - top: 50%; - left: 50%; - width: auto; - max-width: 100%; - height: auto; - transform: translate(-50%, -50%); - } } // Variant: Not landscape @@ -203,7 +203,7 @@ opacity: 1; img { - transform: scale3d(1,1,1); + transform: scale3d(1.01, 1.01, 1.01); } } }