flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make aspect-ratio fallback work properly on Location page House photo

Browse Source
This commit is contained in:
Félix Péault
2022-06-13 23:46:04 +02:00
parent d5b860da03
commit 6873ad6a66
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/style/molecules/_house.scss
View File

@@ -91,8 +91,8 @@
border-radius: 8px; border-radius: 8px;
} }
// Aspect-ratio fallback
@supports not (aspect-ratio: auto) { @supports not (aspect-ratio: auto) {
position: relative;
overflow: hidden; overflow: hidden;
padding-top: 66.66%; padding-top: 66.66%;
height: 0; height: 0;
@@ -101,25 +101,25 @@
picture { picture {
height: 100%; height: 100%;
border-radius: 0; 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 { img {
display: block; display: block;
width: calc(100% + 2px); width: 100%;
height: calc(100% + 2px); height: 100%;
object-fit: cover; object-fit: contain;
transform: scale3d(1.125, 1.125, 1.125); transform: scale3d(1.1, 1.1, 1.1);
transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart); transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
will-change: transform; 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 // Variant: Not landscape
@@ -203,7 +203,7 @@
opacity: 1; opacity: 1;
img { img {
transform: scale3d(1,1,1); transform: scale3d(1.01, 1.01, 1.01);
} }
} }
} }