HTML で画像を拡大縮小する

1. HTML のブラウザのビューポート内で大きなサイズの画像を拡大縮小する
2. HTML で width および min-width プロパティを使用して画像を拡大縮小する

このチュートリアルでは、HTML で大きなサイズの画像を拡大縮小する方法を説明します。

HTML のブラウザのビューポート内で大きなサイズの画像を拡大縮小する

画像の width プロパティと height プロパティを使用して、HTML で大きな画像を拡大縮小できます。大きなサイズの画像は画面の端から外れます。画像をビューポートサイズに拡大縮小するには、コンテナを使用して、その height プロパティと width プロパティをビューポートの高さと幅に設定します。vh および vw 単位を使用してサイズを設定できます。vh と vw の 1 単位は、ビューポートの高さと幅の 1％に相当します。100%に設定すると、画像の高さと幅を設定できます。画像はコンテナ内に挿入する必要があります。次に、大きなサイズの画像がビューポートに収まります。

たとえば、クラス container を使用して HTML で div を作成します。div 内に img タグを書き込み、大きなサイズの画像を挿入します。CSS で、container クラスを選択し、その height と width を 100vh と 100vw に設定します。次に、img タグを選択し、その height と width を 100%に設定します。

以下の例では、vh、vw、%などの単位を使用して、ビューポートに収まるように大きな画像を拡大縮小します。

サンプルコード：

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

HTML で width および min-width プロパティを使用して画像を拡大縮小する

width および min-width プロパティを使用して、HTML で画像を拡大縮小できます。<img> タグのスタイリング中にこれらのプロパティを使用できます。width プロパティは、要素の幅を指定します。min-width プロパティは、要素の最小幅を指定します。コンテンツが最小幅よりも小さい場合にのみ適用されます。それ以外の場合、このプロパティは効果がありません。さらに、このプロパティは、width プロパティの値が min-width よりも小さくなるのを防ぎます。この方法では、width と最小幅をピクセル単位で表します。

たとえば、HTML 本文内に <img> タグを記述します。<img> タグ内で、src 属性を使用して画像へのパスを指定します。次に、style 属性に 25vw の width と 140px の min-width を指定します。次に、<img> タグを閉じてから、以前に開いたすべてのタグを閉じます。

width プロパティと min-width プロパティを使用して画像を拡大縮小しました。ビューポートに収まらない大きなサイズの画像は、ビューポートに収まる可能性があります。以下の例の 25vw 幅は、幅がビューポートの幅の 25％に対応することを示しています。このようにして、HTML の style タグを使用して画像を拡大縮小できます。

サンプルコード：

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />