.native-lazyload-js-fallback{display:none}フロントエンドエンジニアに転職した人のブログ。日々趣味のことからHTML・CSS・CMSの情報などなど公開中。TOPサイト制作WordPress制作ツール制作物CSSで画像トリミング!IE11での実装方法【object-fit】CSSTwitterFacebookはてブPocketLINEコピー2020.02.08レスポンシブデザインなんかでたまにある・・・PCとSPのデザインファイルを見て画像のトリミングが違う場合、「うええええええめんどおおおおおお」ってなりますよね?わかるー、コーダーあるあるです。トリミングが変わるかもしれませんが、CSSだけで画像をトリミングすることができます。許容範囲ならこれで十分かな?目次CSSだけで画像をtリミングするトリミング位置を指定してトリミングするobject-fitのIE11対応についてCSSだけで画像をtリミングする今回使うのは「object-fit」!こいつ1行で簡単に画像をトリミングできちゃいます。準備した画像はw:500×h:1000でトリミングしたいのはw:300×h:300とすると指定の位置だけトリミングできちゃう。何も考えず画像をw:300×h:300似しようとするとこんな感じですね。300px;}対比があかんことに・・・なりますね。トリミングするコードを追加するとこんな感じ。cover;}何も考えずとも中央で画像がw:300×h:300でトリミングされます。これはやべえ簡単だ(^q^)トリミング位置を指定してトリミングするトリミングできてええも中央だけじゃちょっと・・・という場合も安心!「object-position」でトリミング位置も調整可能です。縦位置;」で調整できます。100%}object-fitのIE11対応についてこの前ほぼほぼ主要ブラウザは対応したもののIE11のみ非対応。IE11はまだ使っている人多いので見逃せませんよね。早くサポート切ってほしい。IE11のためにコードを追加するのも面倒なので、JSで実装します。プラグインがあるのでI11対応も楽々です。・「fitie.js」を読み込ませます。以上!「object-position」がこれだけでは対応できませんが、中央でいいよって方ならこれが一番楽にI11対応させる方法です。他にも「object-fit-images」を使う方法、CSSを使って対応させる方法もあります。細かな位置調整をする場合は、「object-fit-images」、「CSS調整」は必須になります。けHTML5でサイトを作る方法。サイトを作るための準備編としてオススメのテキストエディタやブラウザを紹介。サイトの作り方を紹介していきます。HTML5・CSSをマスターして自分のサイトを作ろう。WordPress【WP】カテゴリスラッグを取得し、classとして使う方法WordPressでカテゴリスラッグを取得し、classに追加する方法。WordPressでカテゴリスラッグの取得方法、「get_the_category()」のいろいろな使い方を紹介しています。カテゴリスラッグでclassをつけよう。chrome)で表示される謎の青枠を消す方法を紹介。chromeのみで表示される謎の青枠をCSSで消す方法をまとめています。chromeの青枠を消せずに悩んでいる方は是非参考にしてみてください。WordPresshtml・CSS・PHPなどソースコードをワードプレスの記事で表示させる方法WordPressで技術ブログをされている方必見。html・CSS・PHPなどソースコードを簡単いWordPressで出力できるプラグインを紹介。WordPressでエンジニアブログ・技術ブログを作ろう!WordPressWordPressのバージョン情報を非表示にする方法【セキュリティ対策】WordPressのバージョン情報を非表示にする方法。バージョン情報を隠してセキュリティ強化を行おう。WordPressのバージョン、プラグインのバージョンを非表示にする方法を紹介しています。CSSレスポンシブコーディングで使える!横幅自動計算mixinスニペットレスポンシブコーディングで使用するpxを%に変換を自動化しました。Sassのmixinスニペットでレスポンシブの横幅を楽に%で指定できます。mixinスニペットでレスポンシブコーディングの横幅指定を自動化しよう。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。yuki_webdsサイト情報HTM・CSS・Jquery・PHP・CMS(WordPressなど)を使ったWEBサイト制作の情報を公開中。これからWEBサイトを作ってみたい人・コーディングやWordPressをカスタマイズしたい人はぜひ!HTMLコーダーやフロントエンドエンジニアを目指している人や自分でWEBサイトを作ってみたい人の初心者向けコンテンツも作成していきます。exports?exports.SyntaxHighlighter=SyntaxHighlighter:null;タイトルとURLをコピーしました。