用CSS彈性大小的圓形圖像

我正在使用這些very nice demos爲我的圖像添加一些樣式。用CSS彈性大小的圓形圖像

不幸的是，我在這些演示中注意到的事情是，您無法重新調整圖像的大小。如果你這樣做，那麼圖像沒有正確居中。

這裏有一個截屏向你展示我的意思：

這裏是jsfiddle的人一起玩。

有人可以幫助弄清楚如何集中這些圖像，使每隻狗完全在視野內？

UPDATE：最近更新了他的代碼，允許可變圖像尺寸爲許多樣式的演示的開發商：http://webdesignerwall.com/demo/css3-image-styles-part-2/ 請注意，圓形圖像是不是的這些更新的樣式之一。

想與background-position CSS屬性發揮：

background-position: 0px 0px;

見中心example。

您還可以background-size CSS屬性發揮：

background-size: 30px 30px;

見example縮放。

這裏是在兩個30像素和許多形象風格更完整的展示爲150px：http://jsfiddle.net/trpeters1/XkGuu/25/

2012-05-11 02:24:55

- @ CommunityDrivenBusiness感謝那是有幫助的，遺憾的是，如果你改變了大小30像素，那麼他們不會再居中：HTTP：/ /jsfiddle.net/trpeters1/XkGuu/8/有關更靈活/更靈活的解決方案的想法？ –

在這種情況下，您可以使用background-size：30px 30px。 –

- @ CommunityDrivenBusiness謝謝是的，這很好！大家有興趣的請看這個：http://jsfiddle.net/trpeters1/XkGuu/14/ –

回答