CSSを使用した柔軟なサイズの円形画像

Question

私はこれらの画像を使用して画像にスタイルを追加しています。

これらのデモで気づいたのは、イメージのサイズを変更できないということです。そうした場合、イメージは適切にセンタリングされません。ここで

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

を一緒にプレイする人のためのjsfiddleです：

は、ここで私が何を意味するかをお見せするためにスクリーンショットです。

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

UPDATE：最近のスタイルの多くのための可変の画像サイズを許可するように自分のコードを更新したデモの開発者：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ズームイン参照してください。 http：/ - 役に立つCommunityDrivenBusinessおかげで@、残念ながらあなたは30pxにサイズを変更した場合、その後、彼らは再び中央にされていないhttp://jsfiddle.net/trpeters1/XkGuu/25/