本記事の内容 CSSとjQueryを使った画像の縦横比を判別して画像サイズを最適化する方法 今や当たり前になったレスポンシブデザイン。 レスポンシブデザインを導入する上で、画像サイズの最適化が一つポイントとして挙げられます。 画像サイズ最適化サンプルCSS @media screen and (max-width:768px) { img{ width: 100%; height: auto; } } 上記のCSSはレスポンシブデザインにおける<img>タグのサイズの最適化の例です。 画面幅が768px以下の時は<img>タグに対して、横幅にだけwidth:100%;を指定してスマホやタブレットの画面いっぱいに広げて、高さはheight:auto;で自動的に最適化させます。 しかし、この方法だと画像のサイズが横幅に依存する形になり、縦の比率が高い画像は、スマホやタブレットで見たときにかなり
![CSSとjQueryで縦横比を判別して画像表示サイズを最適化する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/6054dc6e486f5b6b72833a6f2f7a70b1ca842370/height=288;version=1;width=512/https%3A%2F%2Fto-benefit7.com%2Fwp-content%2Fuploads%2F2020%2F02%2Fsmartphone-site-slide05.jpg)