方法-レスポンシブ画像
CSSを使用してレスポンシブ画像を作成する方法を学びます。
レスポンシブ画像は、画面のサイズに合わせて自動的に調整されます。
ブラウザウィンドウのサイズを変更して、レスポンシブ効果を確認します。
レスポンシブ画像を作成する方法
ステップ1)HTMLを追加します。
例
<img src="nature.jpg" alt="Nature" class="responsive">
ステップ2)CSSを追加します。
画像の応答性を拡大および縮小する場合は、CSSwidth
プロパティを100%に設定し、height
自動に設定します。
例
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.