レスポンシブ時代の昨今、ワンソースでPCやタブレット、スマホなど画面サイズが異なる様々なデバイスに対応させることに翻弄されている人も少なくないだろう。
WordPressなどのCMSを使っていると、一見、完璧そうに思えるテーマでもデバイスによっては画像が「びょ～～ん」と伸び縮みしてしまうことがある。この手の解決手法は根が深い場合は本当に苦労するし、当たり前のことが当たり前にできていないのを当たり前にするだけ、という心身が疲れ果てる作業なのである。
そんな場合に一発解決できるかも知れないCSSを紹介する。なお、サイトの構造によっては、もっと色々やらないと解決できない場合もあるからご承知おきを。
古典的(?)手法
該当の歪んでしまったCSSに下記のコードを当てる。大抵はこれでうまく行くか、入り組んでいる場合は無理なこともある。
width: 100%;
height: auto;
最近(?)の手法
古めのブラウザやIEなどでは対応しない場合もあるが、便利なコードなので知っておくと良い。
詳しくはリンク先で確認して欲しいが(なげやり)、親要素にはめ込むために存在しているプロパティ。アスペクト比(縦横比)を維持したままフィットさせるとかができる。
古典的手法で駄目な場合でも、これで一発解決できる場合もあるから、心身疲れ果てる前にお試しあれ。
