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 -

Top comments (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

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

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

Thank you!😄

Collapse
 
coderrohit profile image
coderRohit1

Second one is amazing!

Collapse
 
fidalmathew profile image
Fidal Mathew

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

All the best Ayush! 👍😁

Collapse
 
bosspetta profile image
Enrique

There're very useful, thanks! 😉

Collapse
 
fidalmathew profile image
Fidal Mathew

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

Glad you liked it! Happy new year :)

Collapse
 
oluwumi71 profile image
Oluwumi71

Thanks

Collapse
 
fidalmathew profile image
Fidal Mathew

Glad you liked it 😄

Collapse
 
harshadpk profile image
Harshad pk

thanks for this

Collapse
 
fidalmathew profile image
Fidal Mathew

Glad you found it helpful 😄

Classic DEV Post

brain computer interface

Experimenting with brain-computer interfaces in JavaScript