CSS:画像を異なるデバイス幅100％にフィット×コメディ
コント；童話を論破するギャル
※コードは下へどうぞ
昨日、王子って人が来てさー、
えー？。
なんかガラスの靴持ってきて、履いてみてって
( ん？ シンデレラ？どんな状況だよ
ちょっと大きかったけど、中敷き入れたら、ちょうどでさ
あーね
そしたら「あなたをお探ししてました、共に暮らしましょう！」とか言われちゃって
えー、でどした？ 笑
断ったわ
まあ、そんなん早いしね
いや、思ったんよ。 ガラスの靴なんて、おかしくね？ 歩いたら絶対割れるっしょ
あーそれなー
しかも足痛いのマジ確定
説ある マジ負傷
そもそもさ、なんで靴なん？って聞いたら、
うん
舞踏会で会った人。 靴だけ残して帰ったらしくて、、でもなんで顔ぐらい覚えてないの？って思わん？
それよな。 そんだけアリ！って思うなら、なんで顔わからんの？
なー。ヤバくね？ あれかな？ 相貌なんとか、とか？
あー 人の顔、覚えられんって病気？ だったら王子、お医者さん探した方がいいよね
それな 笑
それに、ダンス一回しただけで結婚とか、、浅すぎん？ もっと人間性見ろし
あーまじルッキズム系。 それに話すれば家で理不尽な扱い受けてんのとか解決だってしてあげれるかもなのにね
王子、距離感バグってるわ
王子、軽すぎみある
王子、最強ライト級
王子、まじフライング
あとーさー、雪の降る街行ったら、マッチ売ってる女の子がいてー
（ え？どこの話だよ
あーマッチ売りの少女やん？
そそ。マッチなんか絶対儲からんの明白だし、キンパ教えてあげた
ええやん。そしたら、どした？
手軽に食べられて時短～って評判になって、めっちゃ儲かってチェーン店にして無双状態だわ
マッチポンプ脱出やん 笑
まさにマッチから火がついたわ
それな 笑 チルいわ
童話に仕立てる前にさぁ、まず悲劇を防いだ方が良くない？
説ある。結構、ひどい話、あるもんね 童話って
チルチル、ミチルの青い鳥の話もさ
うん
（あー次々行くなぁ
「青い鳥探しに行け」って言うの、魔法使いのおばあさんじゃん？
あーね
魔法使いだったら、そもそも自分で出してって思う
説ある
たぶん、その魔法使いのおばあさんが白い鳩を青く変えたんだと思うけどさ
なるなる
目の前でやってあげて、幸せは身近なとこで探しなさい、ってその場で教えてあげなよ、って思う
あーね。 子供に危険な旅、何度もさせる必要ないわ
なー。なんかさー、世の中で語られてるの、考えたら結構多めにおかしくね？
なー、しれっと恐怖感 満載なのある
あるわ。 童話、まじホラー
子供もサがるっしょ
童話、子供の気持ち考えろし
コードの解説
あーそういや、画像もデバイス幅にぴったり合わせる方法、語られなさ過ぎてなくない？
あー、それな
最初、画像自体に100%指定しがち
なー。 それだとデバイス幅関係なく画像のサイズにしかならんよね
<meta name=”viewport” content=“width=device-width,initial-scale=1.0”>
の記述は指定して、いろいろなデバイスに画面いっぱいに画像を表示したいのにimgにwidth:100%;すると他のコンテンツが小さくなってしまう！など、悩んでいませんか？
画像に100％の指定をすると、当然その画像の元のピクセル数で表示されてしまいますので、”デバイス画面の100％”にはならないわけですね。では、どうするか？
まず画面100％の箱を作り、そこに画像を納めれば良いのです。
考え方としては画像をfigureタグなどで囲い、そのfigureにコンテンツの幅100%を指定します。そして、その箱（コンテンツ）内部に画像をピッタリ入れ込む、という考え方です。
CSS３のobject-fitを使います。
HTML
<figure class=”gamen”><img class=“gazou” src=“images/pic.jpg”> </figure>
画像を囲うfigureにgamenと言うクラスを付与。
画像そのものにはgazouと言うクラスを付与しています。
もちろん任意のネームにして構いません。
CSS
.gamen{
width: 100%;
height: auto;
}
.gazou{
object-fit: cover;
}
object-fit:は他にもcontainなどの指定方法がありますが、基本coverしか使うことはないと思います。
もちろん横幅は95％や90％など自由に指定できますので、余白が欲しい場合は短めに設定しておけば良いのです。
imgの外のタグにwidth100％を指定、そこに画像をobject-fitで納める
これでモバイル対応はバッチリですね！
Share Me !