tom/diana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero image: crop to face, match exact text-stack height

Browse Source
This commit is contained in:
Tom Roth
2026-07-31 10:14:20 +02:00
parent f60e66e671
commit 60e19e8642
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/main.css
View File

@@ -640,8 +640,9 @@ a {
@media (min-width: 1024px) { @media (min-width: 1024px) {
.hero__content { .hero__content {
padding-block: var(--space-8); /* No extra padding — section handles outer breathing room.
justify-content: center; Image will be exactly the natural height of the text stack. */
justify-content: flex-start;
} }
} }
@@ -694,10 +695,10 @@ a {
} }
.hero__image img { .hero__image img {
/* Let the image fill the full height of the content column. /* Fill the content column height exactly; crop from the top
aspect-ratio is removed so the image stretches to whatever so only Diana's face and shoulders are visible. */
height the left (text) column naturally takes. */
height: 100%; height: 100%;
object-position: center 8%;
aspect-ratio: unset; aspect-ratio: unset;
border-radius: 0; border-radius: 0;
} }