実際のテクニック (正常に動作します):
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css (記事の最初の例)
結果は異なります:
Chrome/Safari は、固定高さ 300px、幅 100% の「マスク」div 内の垂直方向の中央からこの手法を使用して、100% 幅/高さの自動画像を「スケーリング」します。そのため、コンテナ要素の幅を広げると、画像が縮小されるときに上下が均等に切り取られますが、左右の端はコンテナに「くっつきます」(水平方向の切り取りはありません)。
.container
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 310px;
min-width: 462px;
}
img
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: block;
width: 100%;
min-height: 310px;
margin: auto;
}
チェックアウトするためのフィドル（インラインコードで申し訳ありません）は次のとおりです。
ただし、Firefox では、画像は中心点のアンカー ポイントではなく、左上隅のアンカー ポイントから「スケーリング」されるため、画像は下部に沿ってのみトリミングされます。これは、この方法で 2 つのエンジンがどのように動作するかについての単なる低レベルの違いですか?
この画像では、左側が Firefox、右側が Safari です。赤い枠線は、画像が切り取られている場所を示しています。
