画像を伸縮せずにコンテナにフィットさせる方法

1. オブジェクトフィットを使用する方法: CSSのオブジェクトフィットプロパティを使用すると、画像をコンテナに収めることができます。以下は、この方法の例です。

   HTML:

   <div class="container">
    <img src="your-image.jpg" alt="画像">
   </div>

   CSS:

   .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
   }
   .container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
   }

   この例では、コンテナには画像が収められ、画像は伸縮されずにコンテナ内にフィットします。

2. バックグラウンドイメージを使用する方法: もう一つの方法は、画像をコンテナの背景イメージとして設定する方法です。以下はその例です。

   HTML:

   <div class="container"></div>

   CSS:

   .container {
    width: 100%;
    height: 100%;
    background-image: url(your-image.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   }

   この例では、コンテナの背景イメージとして画像が設定され、background-sizeプロパティを使用して画像をコンテナ内にフィットさせます。

以上の方法を使用すると、画像をコンテナにフィットさせることができます。必要に応じてCSSをカスタマイズして、表示を調整することもできます。