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
|
||||
sx={{
|
||||
height: 80,
|
||||
aspectRatio: '3/2',
|
||||
borderRadius: 1.5,
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#e8e7e4',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: '#f4f3f0',
|
||||
}}
|
||||
>
|
||||
{image ? (
|
||||
<Box component="img" src={image} alt={property.title}
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||
) : (
|
||||
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Building2 size={32} color="#94a3b8" />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@@ -193,8 +192,8 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Image with consistent aspect ratio */}
|
||||
<Box sx={{ position: 'relative', height: 90, overflow: 'hidden', bgcolor: '#f4f3f0' }}>
|
||||
{/* Image — same aspectRatio: '3/2' as PropertyIntelligenceCard */}
|
||||
<Box sx={{ position: 'relative', aspectRatio: '3/2', bgcolor: '#f4f3f0', overflow: 'hidden' }}>
|
||||
{match.imageUrl ? (
|
||||
<Box
|
||||
component="img"
|
||||
@@ -203,7 +202,7 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
|
||||
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" />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user