CSS で画像のサイズを変更する

1. CSS で max-width および max-height プロパティを使用して画像のサイズを変更する
2. CSS で object-fit プロパティを使用して画像のサイズを変更する
3. CSS で画像のサイズを変更するには、幅の auto 値と max-height プロパティを使用する

この記事では、CSS で画像のサイズを変更して、高さと幅を維持しながら、比例して div に収まるようにする方法を紹介します。

CSS で max-width および max-height プロパティを使用して画像のサイズを変更する

HTML で画像を挿入するときはいつでも、画像はそのサイズの合計ピクセルを占めます。画像が特定のコンテナ内にある場合、画像のサイズがコンテナのサイズよりも大きくなることがあります。画像は画面上のより多くのスペースをカバーします。それは他の要素から領域を取ります。その結果、ウェブページは私たちのデザインに従わず、魅力的ではなくなります。この問題を取り除くために、max-width および max-height CSS プロパティを使用して、コンテナのサイズに応じて画像のサイズを自動変更できます。これらのプロパティは、要素の最大の高さと幅を設定します。要素のコンテンツの幅と高さが max-width および max-height プロパティよりも大きい場合、それらのサイズはこれらのプロパティの値で調整されます。ただし、サイズが小さい場合は効果がありません。max-height プロパティと max-width プロパティを要素に設定できるため、コンテナ内の要素はサイズを調整します。

たとえば、HTML でクラス cat を使用して div を作成します。div 内に、<img> タグを使用して画像を挿入します。CSS で、img タグを選択し、プロパティ max-width と max-height を 100%に割り当てます。次に、cat クラスを選択し、200px と 200px の height と width を指定します。

以下の例では、LoremFlickr からランダムな画像を挿入しました。これは、width と height の 300px を持っています。ただし、コンテナ cat の高さと幅は 200px です。max-height プロパティと max-width プロパティを使用したため、大きな画像はコンテナのサイズに縮小されます。したがって、画像のサイズを自動変更しました。

サンプルコード：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

CSS で object-fit プロパティを使用して画像のサイズを変更する

CSS の object-fit プロパティを使用して、コンテナに合わせて画像のサイズを変更できます。コンテナのサイズは、画像よりも大きい場合と小さい場合があります。プロパティを使用すると、コンテナのサイズに応じて画像や動画を収めることができます。object-fit プロパティを使用して、画像がどのようにフィットするかを指定できます。プロパティは、fill、contain、cover、none、scale-down などの値を取ります。contain 値を使用して、大きな画像をコンテナの指定されたサイズに縮小できます。

たとえば、最初の例のように img タグを使用して、600px の高さと幅の画像を挿入します。CSS で、タグを選択し、高さと幅を 100%に設定します。object-fit オプションで contain 値を使用します。次に、cat クラスを選択し、コンテナに 300px の高さと幅を指定します。

ここでは、コンテナのサイズよりも大きいサイズの画像を挿入しました。画像は 600px ですが、コンテナは 300px のみです。object-fit プロパティを使用して、画像をコンテナのサイズに縮小できます。したがって、画像のサイズを自動変更できます。

サンプルコード：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

CSS で画像のサイズを変更するには、幅の auto 値と max-height プロパティを使用する

auto 値を幅に使用し、max-height プロパティを設定して、コンテナに収まる画像の幅を指定できます。画像の高さをコンテナの高さに縮小します。たとえば、上記のように HTML で画像を挿入し、CSS でコンテナの高さを 200px に設定します。次に、img タグを選択し、幅を auto に設定し、max-height プロパティを 100%に設定します。

以下の例では、画像の高さと幅は最初は 400px です。コンテナの高さを 200px に設定しました。max-height プロパティを 100％に設定すると、画像が 200px に縮小されます。したがって、コンテナの高さに応じて画像の高さのサイズを変更しました。

サンプルコード：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}