閉じる

CSSでの画像トリミング風表示

写真、画像を任意の場所で表示したい場合は、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

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>

もちろn、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でも縮小されるようになりました。

ピックアップ記事

  1. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る