About section: switch author photo to object-contain
object-cover on the square about-author.jpg inside this wide/short banner was scaling the image up to fill the width and cropping most of the height away, blowing the face up to fill the entire strip. Verified the exact crop with a sharp simulation before switching. object-contain shows the whole photo at its real proportions instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
This commit is contained in:
@@ -99,14 +99,18 @@ export function About() {
|
||||
src="/about-author.jpg"
|
||||
fill
|
||||
sizes="(min-width: 640px) 58vw, 100vw"
|
||||
// object-position shifted up from center — about-author.jpg is a
|
||||
// square close-up portrait (1254x1254), and this banner is wide
|
||||
// and comparatively short, so a centered crop on a square source
|
||||
// blows the face up to fill the whole strip (reported 2026-08-29,
|
||||
// after the photo swap to this tighter headshot). Biasing toward
|
||||
// the top keeps hairline/forehead in frame instead of cropping
|
||||
// straight into eyes-to-chin.
|
||||
className="object-cover object-[50%_20%] pointer-events-none"
|
||||
// object-contain, not object-cover — about-author.jpg is a square
|
||||
// close-up portrait (1254x1254) and this banner is wide and
|
||||
// comparatively short, so object-cover scales the square up to
|
||||
// fill the width and then crops most of the height away: the
|
||||
// face fills the entire strip, way too large (reported
|
||||
// 2026-08-29; simulated the exact crop with sharp to confirm
|
||||
// before switching — a plain object-position tweak only moves
|
||||
// which part of the face is blown up, it doesn't fix the zoom
|
||||
// itself). contain shows the whole photo at its real proportions;
|
||||
// the empty sides fall back to the section's own bg-dark behind
|
||||
// the image, which reads as a deliberate frame rather than a gap.
|
||||
className="object-contain pointer-events-none"
|
||||
/>
|
||||
{/* Left gradient — from sm: up, not just lg:. Even without the
|
||||
-ml-48 overlap at Tablet, the photo sits directly against the
|
||||
|
||||
Reference in New Issue
Block a user