Browse Source

fix: use object-cover to fill square thumbnails

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 6 months ago
parent
commit
a265dd1e2f
  1. 6
      src/components/quickstart/TemplateCard.tsx

6
src/components/quickstart/TemplateCard.tsx

@ -72,7 +72,8 @@ export function TemplateCard({
<img <img
src={previewImage} src={previewImage}
alt={`${template.name} preview`} alt={`${template.name} preview`}
className={`absolute inset-0 w-full h-full object-contain transition-opacity duration-300 ${hoverImage ? "group-hover:opacity-0" : ""}`} className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${hoverImage ? "group-hover:opacity-0" : ""}`}
style={{ imageRendering: "auto" }}
/> />
{/* Hover image (if provided) */} {/* Hover image (if provided) */}
{hoverImage && ( {hoverImage && (
@ -80,7 +81,8 @@ export function TemplateCard({
<img <img
src={hoverImage} src={hoverImage}
alt={`${template.name} hover preview`} alt={`${template.name} hover preview`}
className="absolute inset-0 w-full h-full object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300" className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
style={{ imageRendering: "auto" }}
/> />
)} )}
</> </>

Loading…
Cancel
Save