Propowershell• 40
@Propowershell
Posted
Your approach works, but for better responsiveness, it's typically more efficient to avoid setting widths in px, as this can make scaling difficult on different screen sizes. Instead, using percentage-based widths or relative units like vw (viewport width) is more flexible. For instance:
css .container { width: 100%; padding: 20px; }
img { width: 100%; height: auto; }
This allows the image to scale with its container while maintaining its aspect ratio, making it responsive without the need for fixed pixel values.
Regarding `object-fit`, it's indeed a useful property when you want the image to fill a container while maintaining its aspect ratio or when you want to crop the image. For example, using `object-fit: cover` will ensure the image fills the container, potentially cropping it, while `object-fit: contain` will maintain the entire image within the container.
So, for best practices:
- Use fluid layouts (percentages or `vw` for widths).
- Use `object-fit` when you need images to behave more flexibly in varying container sizes.
- Consider setting `max-width` to prevent oversized images on larger screens.
Marked as helpful
0
Alexander Roan• 100
@dearestalexander
Posted
@Propowershell Thanks for the feedback, I got really good feedback on a later challenge and understand these points now, but haven't gone back to retroactively fix this one yet.
0
Propowershell• 40
@Propowershell
Posted
@dearestalexander Ok, that's great, the card looks perfect though 👍🏽
Marked as helpful
0
