Hello Coders, hope you're all doing well. In this blog, I'll be sharing five important properties to keep in mind when working with images.
1. Object-fit : cover
This property allows the image to fill the entire container while maintaining its aspect ratio, making it particularly useful for profile images
2. Transform: scaleX(-1) / scaleY(-1).
To flip your image horizontally, use transform: scaleX(-1)
; for a vertical flip, use transform: scaleY(-1)
.
3. Filter: drop-shadow
This property adds shadows to images without backgrounds. For example: filter: drop-shadow(30px 10px 4px #3a3a3a);.
4. Filter: Opacity
This property adjusts the transparency of the image based on the specified percentage.
If you know of other tips/tricks, let me know in the comments. Thanks for reading