写真、画像を任意の場所で表示したい場合は、Photoshopなどでの画像トリミングが基本でしたが、現在は、CSSやjQueryなどでも表示を調整できます。便利になりました。
ここでは、CSSの指定サイズで画像の余計な部分を非表示にし、トリミング風に見せるやり方を紹介します。
CSSでの画像トリミング表示
元の写真は、この鳥です。
この画像を表示したいサイズが、横300px、高さ180pxだったとします。
divで囲み、position: relativeにし、overflow: hiddenを記載します。
overflow: hiddenで、横300px、高さ180pxからはみ出る部分を非表示にするというわけです。
.photobox {
overflow: hidden;
width: 450px;
height: 280px;
position: relative;
}
.photobox img {
position: absolute;
width: 100%;
height: auto;
}
こんな感じになります。
object-fitを使用する（IEやEdgeは対応外）
もう1つ、object-fitというプロパティがありますが、Windows10の標準ブラウザのEdgeやIEは対応外です。
設定の仕方は、シンプルです。
下記の例だと、
.photobox2 img {
width: 600px;
height: 200px;
object-fit: cover;
}
高さ200px以上は表示されなくなります。
凄く便利ですが、残念ことにデフォルトではEdgeやIEで効きません。
EdgeやIEだと、縮小されて表示されます。
object-fitをIEやEdgeで対応する場合
しかし、下記で公開されているjsファイルでobject-fit: cover;をEdgeやIEに対応する事ができます
https://github.com/bfred-it/object-fit-images
Clone or downloadからファイル取得します。（githubを使用していない場合はDownload ZIPを選択）
dist内のofi.min.jsを使用します。
まずは、HTMLでofi.min.jsを読み込みます。
<script src="/js/ofi.min.js"></script>もちろｎ、ofi.jsでもOKです。
その場合、
<script src="/js/ofi.js"></script>です。
<script>
objectFitImages(’.photobox2 img’);
</script>
を設定します。
(’’)には、設定したクラスなどを記載します。
CSSには、
font-family: ‘object-fit: cover;
を追加します。
.photobox2 img {
width: 600px;
height: 200px;
object-fit: cover;
font-family: 'object-fit: cover;'
}
これでIEやEdgeでも縮小されるようになりました。
