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;
}
// 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);
}
}
}