wordpress

object-fitで画像のトリミング

投稿日:

画像のトリミング

 

PCとスマホで画像の見え方を変えるのに役立つのが、

cssの「object-fit」プロパティです。

背景画像として扱うcssの「background-size」というのもありますが、

アイキャッチ画像や貼り付けたい画像などimg要素に適用させたい場合は、 「object-fit」が便利です。

 

object-fitの説明

 

object-fit

 

元の画像サイズは、W640px:H480px

 

「object-fit:cover」を使って表示させてみたいと思います。

 

img {
width: 240px; /* 任意の幅を指定 */
height: 480px; /* 任意の高さを指定 */
object-fit:cover;
}

 

 

cover

他にも、「cover」以外にもありますので参考までに
 

fill (初期値)画像をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにする
contain 画像をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようする
cover 画像をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングする
none 画像をリサイズしないで、ボックスサイズでトリミングする
scale-down 画像のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるする。

 

IEとEdgeに対応させる

 
残念ながら、IEとEdgeには対応していませんので、
「object-fit-images」を使って、対応したいと思います。(簡単です)
 

1.ファイルのダウンロード

必要なファイルを下記ページ右上の「Clone or download」からダウンロードします。
https://github.com/fregante/object-fit-images
ダウンロードしたファイルから「ofi.min.js」を読み込みます。

<scrpt src="js/ofi.min.js"></script>

 

2.画像にクラスを追加

 

<div class="object">
<img src="トリミングしたい画像のパス.jpg">
</div>

または、

<img class="object" src="トリミングしたい画像のパス.jpg">

 

3.cssに「font-family」を記述

 

.object img{
width: 240px; /* 任意の幅を指定 */
height: 480px; /* 任意の高さを指定 */
object-fit:cover;
font-family:'object-fit: cover;';
}	

または、

img.object {
width: 240px; /* 任意の幅を指定 */
height: 480px; /* 任意の高さを指定 */
object-fit:cover;
font-family:'object-fit: cover;';
}	

 

4.最後にスクリプトを呼び出し・実行

 

HTMLの</body> の前に呼び出すコードを記述します。

 
◆全ての画像に適用させる場合

<script>
objectFitImages();
</script>

 
◆任意のクラスに指定したい場合

<script>
objectFitImages('img.任意のクラス');
</script>

 

もっと簡単に

 
ファイルをダウンロードしないで下記のコードを貼りつけると完了します。

header.phpの<head>~</head>内に
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
</body>タグの直前に
<script>objectFitImages();</script>

できましたでしょうか?



-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …

メンバー一覧選手一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②

  1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

wordpressプラグイン

WordPressプラグインおすすめ10選【2017年度】

  1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。   2.バックアップと復元 Updr …

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …