css - 円形の画像コンテナで非正方形の画像の寸法を維持する方法

Question

ユーザーのプロファイルに丸いアバターを作成しており、ユーザーの画像を丸いア​​バター コンテナーに設定する予定です。

画像が正方形の場合は問題ありません

ただし、たとえばこの非正方形の画像の場合、正方形の画像ではない画像を制約することができませんでした

私はこの結果を得るでしょう

これは私が使用しているCSSコードです

.avatar_container {
  display: inline-block;
  width: 25%;
  max-width: 110px;
  overflow: hidden;
}
.avatar_container img {
  border-radius: 50%;
}

常に丸いアバターを維持するにはどうすればよいですか? そして、その中の画像は歪まないでしょうか？オーバーフローは非表示にする必要があります

Answer 1

更新: @grenoult は、css 変換を使用した優れたソリューションへのリンクを見つけました。これは、背の高い画像と幅の広い画像をトリミングできるため、以前のソリューションよりも優れています。それをチェックしてください: http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/ .

古い答え: あなたがしたいことは、正方形のコンテナー div を作成し、その上に境界半径を配置することです。次に、画像が収まるようにサイズを調整します。

HTML:

<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>​

CSS:

.mask {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

img {max-width: 100%;}

jsfiddle: http://jsfiddle.net/V2Xjy/

Answer 2

max-height を試すという Kai Qing の提案も含めると役立ちます。これにより、歪みのない正方形ではない「ソース」画像をマスクできます。

http://jsfiddle.net/bw99N/2/

.mask {
    display: inline-block;
   width: 100px;
   max-height: 100px;
   border-radius: 50%;
   overflow: hidden;
}
img {
    max-width: 100%;
}