html - 使用 CSS 的灵活大小的圆形图像

Question

我正在使用这些 very nice demos为我的图片添加一些风格。

不幸的是，我在这些演示中注意到的一点是您无法重新调整图像的大小。如果这样做，则图像未正确居中。

这是一个屏幕截图，向您展示我的意思:

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

这是 jsfiddle供人们玩耍。

谁能帮忙弄清楚如何将这些图像居中，以使每只狗都完全在视野范围内？

更新:演示的开发者最近更新了他的代码以允许许多样式的可变图像大小:http://webdesignerwall.com/demo/css3-image-styles-part-2/请注意，圆形图像不是这些更新的样式之一。

Answer 1

您想使用 background-position css 属性:

background-position: 0px 0px;

查看居中的 example .

您还可以使用 background-size css 属性:

background-size: 30px 30px;

查看放大的 example .

以下是 30 像素和 150 像素的许多图像样式的更完整演示:http://jsfiddle.net/trpeters1/XkGuu/25/