Udemy講師もやってます→u0u1.net/MGfzTwitterFacebookこんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。比率維持した状態でimgタグを使う比率維持した状態でbackground-imageを使うまとめ比率維持した状態でimgタグを使うまずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。これを調整する場合、親要素の縦か横に合わせることになります。合わせる基準が縦なのか横なのかによって指定を変えます。ヘッダーのロゴは縦幅に、記事のアイキャッチ画像は横に合わせることが多いです。横幅に合わせて画像が伸び縮みするまた要素自体はインラインなので配置に難があります。block;にしてから使うようにしています。auto;}上記のコードで以下のような挙動です。100%;}上記のコードで以下のような挙動です(便宜上heightを100vhにしています)。(gif画像)このような指定をすれば比率を崩さず画像を扱えます。比率維持した状態でbackground-imageを使うさて、background-imageで比率を維持したい場合です。この場合はdivなどのimgタグでないものを比率維持する必要があります。比率維持したdivを作るには、padding-topを使います。padding-topを%指定する場合、なんと基準が親要素のwidthなんです。16:9のdivを作りたいときは以下のように指定します。pink;}この指定で、以下の挙動です。(gif画像)これで比率を維持したdivが出来ました。理想は画像の比率と全く同じ比率のdivを作ることですが、動的に画像を入れる場合は必ずしもそうなりません。最低限綺麗に見えるように指定します。no-repeat;}これで比率を維持してbackground-imageを使うことが出来ました。まとめいかがでしたでしょうか。画像の扱いに困ったら、まずはこの方法を試してみてください。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。最速でフリーのフロントエンドエンジニアになるなら、Javascriptを学ぶなHTMLタグに必ずクラスをつけるべき理由RECOMMENDこちらの記事も人気です。〜メ...HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。未分類2019.12.20プログラミング初心者から独学で学習したい人向けガイドライン【Web系】サイト制作とは2019.12.12【フリーランス志望は必読】Web制作の流れを改めておさらいするサイト制作とは2019.12.11【独学】初心者が3ヶ月でプログラミングをマスターする方法!【大公開】HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。type="date"で、どこをクリックしてもカレンダーが表示されるようにする。