レスポンシブでの画像の振り分け方

Web制作 , テック系 3月 19, 2017 No Comments

先日、Webデザイナーでおそらく知らない人はいないだろうブログ・Webクリエイターボックスを読んでいてobject-fitプロパティなるものが衝撃だった!

知らないCSSがまだまだ出てくるんだなーと。
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

最近追加されていく新しいCSSはどれもレスポンシブを意識したものばかりですね。ですが現場ではまだまだIE11やEdgeを意識して作るので、気が利かないIEをいく日が続きそうです。
4月からWindowsがVistaがサポートを正式にやめるということですが、まだまだIEがプログレッシブエンハンスメントの足を引っ張りそうですね。

古典的で一番わかりやすい 表示非表示

一番古典的で、運用を引き継ぐ時にもわかりやすいかなと思います。いづれの方法も両方のソースコードを読みこむのより一層画像の圧縮などには気を使う必要がありますね。

CSSで背景画像を切り替える時

あまり使う機会はないけどcssでも難なくできる。

pictureでやっちゃう

あまり使わないかな。なぜかというとcssのメディアクエリの値をscssの変数で管理することが多いので、htmlに書いてしまうと仲間外れにされるからね。だけど小規模のサイトで部分的に使うならありかな。

ほなね

【PR】 社会人のための<格安>語学留学【寮・食事付き】172,000円/1ヶ月 の完全マンツーマン留学 フィリピン政府公式認定語学学校【NILS】
Tags :

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA