fix(anfragencenter): use aspectRatio 3/2 for match card images like PropertyIntelligenceCard
Replaces fixed height: 90px with aspectRatio: '3/2' — the same ratio used in supply property cards. Ensures consistent, undistorted image crops across all card surfaces. objectFit: cover guaranteed via <img> element. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -92,20 +92,19 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
|
|||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
height: 80,
|
aspectRatio: '3/2',
|
||||||
borderRadius: 1.5,
|
borderRadius: 1.5,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
bgcolor: '#e8e7e4',
|
bgcolor: '#f4f3f0',
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{image ? (
|
{image ? (
|
||||||
<Box component="img" src={image} alt={property.title}
|
<Box component="img" src={image} alt={property.title}
|
||||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||||
) : (
|
) : (
|
||||||
<Building2 size={32} color="#94a3b8" />
|
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<Building2 size={32} color="#94a3b8" />
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@@ -193,8 +192,8 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Image with consistent aspect ratio */}
|
{/* Image — same aspectRatio: '3/2' as PropertyIntelligenceCard */}
|
||||||
<Box sx={{ position: 'relative', height: 90, overflow: 'hidden', bgcolor: '#f4f3f0' }}>
|
<Box sx={{ position: 'relative', aspectRatio: '3/2', bgcolor: '#f4f3f0', overflow: 'hidden' }}>
|
||||||
{match.imageUrl ? (
|
{match.imageUrl ? (
|
||||||
<Box
|
<Box
|
||||||
component="img"
|
component="img"
|
||||||
@@ -203,7 +202,7 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
|
|||||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
<Building2 size={20} color="#94a3b8" />
|
<Building2 size={20} color="#94a3b8" />
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user