Adjust image cropping to better display faces in photos

Apply `objectPosition: "center 25%"` to all relevant image elements across the client application to ensure faces are consistently visible and not cropped out by the `object-cover` CSS property. This change impacts components in `photo-gallery`, `article`, `category`, and `home` pages. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 6fbb209e-0312-4027-963a-b6aa098cc025 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb Replit-Helium-Checkpoint-Created: true
2026-02-28 19:22:57 +00:00
parent 5730f86a46
commit 0918ffd291
5 changed files with 9 additions and 5 deletions
@@ -74,6 +74,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
                  src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.png"}
                  alt={article.title}
                  className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+                  style={{ objectPosition: "center 25%" }}
                  loading="lazy"
                />
              </div>