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

【问题标题】：flexibly-sized circular images with CSS使用 CSS 的灵活大小的圆形图像
【发布时间】：2012-05-19 15:35:30
【问题描述】：

我正在使用这些 very nice demos 为我的图像添加一些样式。

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

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

这里是jsfiddle 供人们玩耍。

有人可以帮助弄清楚如何将这些图像居中以使每只狗都完全在视野范围内吗？

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

【问题讨论】：

【解决方案1】：

你想玩background-position css 属性：

background-position: 0px 0px;

查看居中的example。

你也可以玩background-sizecss属性：

background-size: 30px 30px;

查看放大的example。

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

【讨论】：

-@CommunityDrivenBusiness 感谢这很有帮助，不幸的是，如果您将大小更改为 30 像素，那么它们将不会再次居中：jsfiddle.net/trpeters1/XkGuu/8 对响应式/更灵活的解决方案的想法？
在这种情况下可以使用 background-size: 30px 30px。
-@CommunityDrivenBusiness 谢谢，很好用！大家有兴趣请看这个：jsfiddle.net/trpeters1/XkGuu/14
不客气！我相信你有机会在我需要的时候帮助我。