ブログフロントエンド10年目の僕がHTML、CSS、javascriptの忘れがちなことを日々書いています。cover」で自動トリミング|IE対応!2023年04月03日この記事は約3分で読めます。枠の中に画像を縦横ピッタリと収めたい時、横幅100%か、縦幅100%かを指定するけど、画面サイズによって縦か横の余白が空いちゃうから、メディアクエリで細かい指定しなくちゃいけなかったり色々手間が多いよね。cover」なら、その面倒から解放されて画面サイズを変えても、イイ感じに両方フィットしてくれる。言葉では分かりずらいのでデモで確認してみよう!デモデモでは、横300px、縦300pxに収まるようにイイ感じになるね!CSSは下記になります。hidden」も要らない。自分は今まで知らなかったので、みんなも使う機会が有ったら一緒に使おう!ちなみにブラウザの対応状況はこんな感じです。IE以外の全ブラウザ対応なので使いやすい。IEはもういいかもだけど場合によっては、まだまだ現役かもしれません。src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>プラグインの「object-fit-images」を利用するためにダウンロードまたは、CDNからのリンクのどちらかをHTMLに書こう。したらjsでimgの処理をします。objectFitImages();これだけでもいいんだけど、このままだと全ての画像に「object-fit-images」のプラグインを利用することになり処理が重たくなっちゃうから、「object-fit」を使う特定画像だけを指定する場合は次の書き方になります。objectFitImages('.first-img');これで「.first-img」だけを処理することができます。最後にCSSで特定の指定をしたら完了です。cover」が利用できるようになりました!IEだけの為にってちょっと面倒だけどしょうがない場合もあります!以上です。CSSjavascriptこんな建物だれがどうしてつくったの?エンデ・バタローフロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。制作のご依頼はこちらから連絡ください。背景にカラーを適応すると、サイトの印象がガラ...2019年12月01日CSSCSSページ幅をこれ以上広げないCSSパソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。親要素に幅に合わせるCSSで親要素の幅に合わせるには下記の様に書きます。2...2024年01月29日CSSCSSCSSだけで角丸枠線グラデーション枠線グラデーションと角丸は相性がめっちゃ悪い。一筋縄じゃCSSだけで実装できない。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。cover」で自動トリミング|IE対応!広告エンデ・バタローフロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。制作のご依頼はこちらから連絡ください。ブログ.メニューHTMLCSSjavascriptPHP箱庭タウンズ検索タイトルとURLをコピーしました。