@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
@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.
@Propowershell
Posted
@dearestalexander Ok, that's great, the card looks perfect though 👍🏽
Marked as helpful