CODEWITHSUNDEEP
htmlimagecssresponsive-design
tim peterson
tim peterson

Reputation: 24305

flexibly-sized circular images with CSS

I'm using these very nice demos to add some style to my images.

Unfortunately, the thing I've noticed with these demos is that you can't re-size the images. If you do then the images aren't centered properly.

Here's a screen shot to show you what I mean:

http://webdesignerwall.com/demo/css3-image-styles/

Here is the jsfiddle for people to play with.

Can someone help figure out how to center these images such that each dog is entirely within view?

UPDATE: The developer of the demos recently updated his code to allow variable image size for many of the styles: http://webdesignerwall.com/demo/css3-image-styles-part-2/ Please note that circular images was NOT one of these updated styles.

Upvotes: 1

Views: 781

Answers (1)

Community Driven Business
Community Driven Business

Reputation: 4682

You would like to play with background-position css property:

background-position: 0px 0px;

See the centered example.

You can also play with background-size css property:

background-size: 30px 30px;

See the zoomed in example.

here's a more complete demonstration of many image styles at both 30px and 150px: http://jsfiddle.net/trpeters1/XkGuu/25/

Upvotes: 2

Related Questions