

divで囲まれたimg要素があります。

[code]

    <div class="wrapper">
        <img class="image" src="xxxx" />
    </div>
    
[/code]

  * imgのアスペクト比を保ちつつdivの中いっぱいに拡大表示したいです。
  * 画像はすべて表示されるようにしたいです。（divをはみ出さない)
  * 縦か横に隙間が出来る場合は、画像は縦横センタリングしたいです。
  * divの幅高さは固定です。

出来ればcssで実装していのですが、不可能であればjsを使うことも検討しています。  
どのように実装すればいいでしょうか。


CC BY-SA 3.0
2015-07-23T06:50:55.307
12605
2015-07-24T06:14:24.017
427
question
css
cssで枠の中の画像をアスペクト比を保ちつつ拡大して全て表示する方法


IE, safari 以外だとobject-fit, object-position というプロパティも使えるようです。

[code]

    <style>
      .wrapper .image{
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center center;
      }
    </style>
    <div class="wrapper">
      <img class="image" src="xxxx" />
    </div>
    
[/code]

firefoxで確認したところ、綺麗にスケーリング・センタリングされてました。


CC BY-SA 3.0
2015-07-24T06:14:24.017
12639
2015-07-24T06:14:24.017
9403
12605
answer