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:
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.
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/
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here