2017.10.06画像編集ソフトを使わずに画像をトリミングできるobject-fitプロパティAdvertisement画像編集ソフトを利用した画像のトリミングは、便利な使い方さえ知っていれば、とても簡単にかつ短時間で行えます。いった便利な使い方を知らない(知る必要のない)WEB担当者の場合は、大量の画像をトリミングしなければならないとなると、「ものすごく時間が掛かってしまうなー」と、頭を抱えてしまうものだと思います。そこで今回は、画像編集ソフトを使わずにCSSにほんの数行追加するだけで画像のトリミングを行う方法を紹介いたします。01.画像を囲むためのリストを用意するまずは画像を横並びで表示するためのリストを用意します。今回は特に装飾はせずに、簡単なリストを用意しました。#cccccc;}02.画像にサイズを指定する次はリストタグの中にimgを挿入し、CSSでimgに対してサイズを指定します。下記の通りこのままではアスペクト比(縦横比)が崩れてしまうので、画像がグチャっと変形してしまっています。bottom;}03.アスペクト比を保つように指定する画像のアスペクト比を制御するプロパティがobject-fitです。このobject-fitで指定できる値は下記の5つです。fill;画像(オブジェクト)はアスペクト比を変えながら、全体がボックス内を満たすようにリサイズされる。contain;画像(オブジェクト)はアスペクト比を保ちながら、全体がボックス内に収まるようにリサイズされる。画像(オブジェクト)のwidthとheightのうち、長いものがボックスにフィットする。cover;画像(オブジェクト)はアスペクト比を保ちながら、ボックス内を余白無しで覆うようリサイズされる。画像(オブジェクト)のwidthとheightのうち、短い方がボックスにフィットし、長い方ははみでる。none;画像(オブジェクト)に指定したwidthとheightは表示領域となり、画像(オブジェクト)はリサイズされず本来のサイズで表示される。scale-down;「contain」と「cover」の小さい方が適用される。cover;の1行を追加するだけで、画像編集ソフトを使うことなく、簡単に画像をトリミングして表示することができるようになります。cover;を指定すると下記のようになります。/*この一行を追加*/}以上で、完成となります。cover;以外の値を指定すると下記のようになります。プロパティを設定します。100%;と記述します。ちなみに%ではなく、pxでも指定することも可能です。対応ブラウザ大変便利なプロパティでありながら、残念なことに、IEとEdge(15以下)には対応していません。IEやEdge(15以下)といったブラウザを利用するユーザー層のエクスペリエンスを犠牲にしても構わなければ、積極的にこのプロパティを使うことをお勧めします。対応ブラウザに関する詳細はこちらのページでご確認ください。IEとEdge(15以下)といった古いブラウザでも対応させたいといった場合には、object-fit-imagesというプラグインを試してみるのもいいかもしれません。src=”js/ofi.min.js”></script>」のように記述して読み込みます。</script>」のようにscriptを呼びだすだけです。詳しくはこちらのページを読んでいただけると、より理解が深まるかと思います。画像編集ソフトを利用しなくても、トリミング程度であれば、このようにCSSで十分に対応が可能です。予算の関係上高額なソフトが購入できなくても、ちょっとした工夫で対応できることが数多くあるので、小さな会社のWEB担当者の方もあきらめずに、素敵なWEBサイトを日々作り続けられるように頑張ってください。今より満足できるサイトを作りませんか?FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。・表示速度アップが期待されるAMPに対応LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。テーマの無料ダウンロードページへ関連するおすすめ記事シェアされるシェアボタンとは。先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。フィット代表2008年にWEBデザイナーとして独立し、フリーとして活動。その後、WEBディレクターとして一部上場企業とベンチャー企業で経験を積み、2016年から再びフリーのクリエイティブディレクターとして活動。現在は、関東圏内で企業のWEBコンサルティング、WEB制作、コンテンツマーケティング支援、SEO対策を行っています。ご相談がありました......2019.07.02ご相談・ご依頼コスメメーカー様よりご相談がありまし......すべてのニュースを見るCONTACTご相談・お見積り無料お気軽にお問い合わせください。消費者が求めているものを理解し、価値あるコンテンツを届けることが、今ホームページには求められています。他社に無い、御社ならではの強みを生かしたWEB戦略を提案いたします。メールでお問い合わせをする個人事業主/中小企業にこそ必要な「選ばれる理由のある」ホームページを提案します。