html - CSS による柔軟なサイズの円形画像

Question

これらの非常に素晴らしいデモを使用して、画像にスタイルを追加しています。

残念ながら、これらのデモで気付いたのは、画像のサイズを変更できないことです。その場合、画像は適切に中央に配置されません。

ここに私が何を意味するかを示すスクリーンショットがあります:

これは、人々が遊ぶためのjsfiddleです。

各犬が完全に見えるようにこれらの画像を中央に配置する方法を誰かが理解するのを助けることができますか?

更新:デモの開発者は最近、コードを更新して、多くのスタイルの可変画像サイズを許可しました: http://webdesignerwall.com/demo/css3-image-styles-part-2/円形の画像は1 つではないことに注意してください。これらの更新されたスタイルの。

score 2 · Accepted Answer

background-positionCSSプロパティで遊びたい：

background-position: 0px 0px;

中央揃えの例を参照してください。

background-sizecss プロパティで遊ぶこともできます:

background-size: 30px 30px;

拡大された例を参照してください。

これは、30px と 150px の両方での多くの画像スタイルのより完全なデモです: http://jsfiddle.net/trpeters1/XkGuu/25/

1 に答える 1