OfficeExcelゲームゲームのお話ホームウェブ制作HTML・CSSimg要素をbackground:coverのように親要素いっぱいに表示する方法【containのようにもできる!】2019年2月7日SHAREツイートシェアはてブLINEPocketサイト内の画像一覧などの決められた枠内(例えば100×100の枠内)にimg要素で画像を配置すると、画像の比率によって上下や左右の余白に差ができてしまい、統一感が失われ見栄えが悪くなってしまいます。いって「画像ひとつひとつを同サイズにトリミングし、配置しなおす」というのも画像の入れ替えが発生した際には、結構な手間がかかってしまいスマートではありません。今回はCSSで画像のトリミングを行い、img要素をbackground:coverの様にしてしまおう!という方法をご紹介します。普通に配置すると?300×300の枠に普通に画像を配置し(今回は800×533の画像を使用)、幅を親要素に合わせてあげると下の画像の様に画像が縦に伸びてしまいます。かわいいチワワの画像もこれでは台無しですね。cover;】この1行を追加してみてください。するとbackground:coverの様に画像が潰れることなく、親要素の枠いっぱいに表示されます。親要素の高さ・幅が変わっても自動でいいサイズになるのでwidthやheightは100%にしておいてもいいかもしれません。contain;】と記載すれば、backgroud:contain;の効果と同じ様に画像の比率を保ったまま親要素の中に配置することができます。数値;】でトリミング位置を指定することができます。0)、数値はpxまたは%で指定します。useで各ブラウザの対応状況を見てみると、IEなどチラホラ対応していないブラウザがあります。!jQueryのプラグインを使うことでIEにも対応させることができます。ZIP」からobject-fit-imagesのファイルをダウンロードします。ダウンロード後、distフォルダの中のofi.min.jsを使用します。jQueryとofi.min.jsの読み込み先ほどダウンロードした「ofi.min.js」はjqueryのプラグインなのでjQuery本体も読み込みます。あわせてスクリプトを呼び出すコードも記述します。});</script>HTMLとCSSを用意HTMLHTMLで画像を配置します。このときにclass名をつけておきましょう。※今回はfit-imgとしました。src="/*画像URL*/">CSS配置した画像のclassに対してobject-fitやobject-positionを記述していきます。cover;’を記述します。object-positionを指定している場合は下記の様にfont-familyに合わせて記述します。100%;'}先ほどscriptに記述したobjectFitImages()の()の中にclass名を指定すると、特定の画像にだけ対応させることができます。親要素にposition:relativeを設定します。画像はposition:absoluteにし、transformなどを使って配置していきます。これだけでcoverのような状態になります。なんか写真がでかいぞ?どうしたらいいんだ・・・?containのようにするにはmax-widthとmax-heightをどちらも100%に指定してあげれば比率を保ったまま配置することができます。CodePen.以上img要素をbackground:coverのように親要素いっぱいに表示する方法でした!あっ、img要素を配置するときは【<p>タグ】もしくは【<figure>タグ】などのブロック要素で囲みましょうね。コメントをキャンセルメールアドレスが公開されることはありません。Awesome5をCSSの疑似要素で指定する方法【表...次の記事レスポンシブデザインでも改行を使い分ける方法【PC・タブレット...ヒロキWebデザイナーしています。