コード・実装

【CSS】特定の縦横比を指定して画像をトリミングする方法

CSSで特定の縦横比を指定して画像をトリミングする方法を共有します。

CSSで特定の縦横比を指定して画像をトリミングする方法

※ IE11に対応するため事前にプラグイン「object-fit-images」を使う (必須ではない)

  1. データをダウンロード
  2. ofi.min.jsを読み込み
  3. スクリプトの呼び出し

使い方は下記参考

https://www.e-webseisaku.com/column/web/3690/

 

① HTMLを用意

<div class="img-wrapper">
    <img src="example1.jpg" />
</div>

 

② CSSを用意 (幅に対する縦の割合を65%と指定する場合)

.img-rwapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%; //幅に対する縦のサイズ
}

.img-rwapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;"; //プラグイン「object-fit-images」の指定
}

 

以上です!

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】