Caseこんな問題を解決!

スマホで見たときに画像が大きく見えるのを修正したい

[お問い合わせ内容]

「スマホで見たとき、画像が大きく見えるのを修正したい」とのお問い合わせ内容でした。

 

[解決策]

解決策として、HTMLとCSSを変更いたしました。

場合によっていくつかの方法がございますので、それぞれの仕方をご紹介致します。

 

①画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合img { max-width: 100%; }

②画像をウインドウ幅いっぱいに表示したいが、本来の大きさより小さくはしたくない場合img { min-width: 100%; }

③画像をウインドウ幅に合わせて表示したいが、極端に大きくなったり極端に小さくなったりするのは避けたい場合img { width: 100%; /* ※A */ max-width: 850px; /* ※B */ min-width: 600px; /* ※C */ }

④画像を拡大も縮小もせず原寸サイズのままで表示したいが、ウインドウ幅が狭いなら表示可能な範囲だけを見せたい場合img { overflow: hidden; }