CSS を使用して画像のサイズを比例的に変更する

アプリケーションをレスポンシブにするには、画像もレスポンシブにする必要があります。画像が応答しない場合、アプリケーションでオーバーフローが発生し、見た目が最悪になります。

したがって、親要素のサイズに基づいて、画像のサイズを比例的に拡大または縮小する必要もあります。ここでは、CSS を使用して画像のサイズを比例的に変更するさまざまな方法を学びます。

ユーザーは、次の構文に従って CSS の「width」プロパティを使用して、画像のサイズを比例的に変更できます。

上記の構文では、画像をレスポンシブにするために、画像の幅と自動高さを 100% に設定しています。

以下の例では、div 要素を作成し、「image」クラス名を指定し、div 要素内の子要素として画像を追加します。

CSS では、div 要素の幅をパーセンテージとして設定し、全体の幅の 30% に相当します。さらに、画像の幅を 100% に設定し、高さを自動的に設定します。ユーザーは画面サイズを変更し、画面サイズに比例して画像サイズが増減するのを確認できます。

以下の例では、「object-fit: contains」CSS プロパティを使用して画像のサイズを縮小します。ここでは、画像の親 div 要素の比例幅を設定します。さらに、「img」要素に「object-fit: contains」CSS プロパティを使用しています。出力では、画像が応答し、その寸法が div 要素の寸法に従って変化することがわかります。

以下の例では、「background-size」CSS プロパティを使用して画像のサイズを比例的に変更します。ここでは div 要素の背景画像を設定します。さらに、CSS プロパティ「background-size」の値として「contain」を使用します。画像を div 全体に広げます。 div要素のサイズが大きくなると、画像サイズも大きくなります。 div要素のサイズを小さくすると、画像のサイズも小さくなります。

ユーザーは画像の寸法を比例的に変更する方法を学びました。ここで必要なのは、画像の寸法をピクセルやレムではなくパーセンテージで設定することだけです。さらに、ユーザーは「background-size」CSS プロパティを使用して背景画像のサイズを比例的に変更できます。

以上がCSS を使用して画像のサイズを比例的に変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。