DEV Community

Cover image for CSS tips on Images you need to know
Fidal Mathew
Fidal Mathew

Posted on

CSS tips on Images you need to know

Hi folks, hope you are doing good. In this blog I'm gonna share 5 properties to keep in mind while working with images -

1. Object-fit : cover -

This property allows the image to fill the entire dimensions while maintaining its aspect ratio. Especially useful for profile images.

Cover

2. Transform: scaleX(-1) / scaleY(-1) -
Use transform: scaleX(-1) to flip your image horizontally and scaleY(-1) vertically.

flip
3. Object-fit : contain -

This property is used to contain the entire image in the desired dimension and also maintains the aspect ratio. This property is used a lot in making banners.

contain

4. Filter: drop-shadow -

This property is used to add shadows to images with no background.
Ex: filter: drop-shadow(30px 10px 4px #3a3a3a);

drop-shadow

30px indicates its relative position towards the right and a negative value will move the shadow towards the left.

10px indicates its relative position towards the top and a negative value will move the shadow towards the bottom.

4px represents its blur factor

3a3a3a represents its color

5. Filter: opacity -

This property increases the transparency of the image depending upon the percentage.

opacity

If you know of other tips/tricks, let me know in the comments. Thanks for reading :)

Connect with me on -

Discussion (19)

Collapse
vladi160 profile image
vladi160

The only required tip is max-width: 100%; for responsive

Collapse
negararianmehr profile image
Negar Arianmehr

Good properties for starting new year, thanks
Good luck 👍

Collapse
fidalmathew profile image
Fidal Mathew Author

Thank you! Good luck to you too! 😄

Collapse
cbretus profile image
cb-retus

The Dropshadow effect only works if your object is cut out clearly and has no "edges", so a PNG-24bit is recommend with a feathered cutout or sharp edges.

Collapse
fidalmathew profile image
Fidal Mathew Author

This info is worth mentioning, thanks for sharing :)

Collapse
fatihydrm profile image
Fatih Yıldırım

Nice work :)

Collapse
fidalmathew profile image
Fidal Mathew Author

Thank you!😄

Collapse
coderrohit profile image
coderRohit1

Second one is amazing!

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it :)

Collapse
ayush200821 profile image
Ayush2008-21

Thanks for these tips! From now, I will use them in my projects❤️🔥

Collapse
fidalmathew profile image
Fidal Mathew Author

All the best Ayush! 👍😁

Collapse
bosspetta profile image
Enrique

There're very useful, thanks! 😉

Collapse
fidalmathew profile image
Fidal Mathew Author

My pleasure! I'm glad you liked it 😁

Collapse
spock123 profile image
Lars Rye Jeppesen

Great, thanks. Happy new year

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it! Happy new year :)

Collapse
oluwumi71 profile image
Oluwumi71

Thanks

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it 😄

Collapse
harshadpk profile image
Harshad pk

thanks for this

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you found it helpful 😄