CSSを使用して画像をDIVに収める方法（伸縮せずに）

方法1: object-fitプロパティを使用する方法 この方法では、CSSのobject-fitプロパティを使用して、画像をDIV内に収めることができます。以下のコードをDIVのスタイルに追加します。

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

上記のコードでは、DIV要素には.div-classというクラスが適用され、画像要素には.img-classというクラスが適用されます。DIV要素の幅と高さは100%に設定され、画像要素はobject-fit: contain;によってDIV内に収められます。

方法2: 背景画像として設定する方法 もう1つの方法は、画像をDIVの背景画像として設定する方法です。以下のコードをDIVのスタイルに追加します。

.div-class {
  width: 100%;
  height: 100%;
  background-image: url('画像のURL');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

上記のコードでは、DIV要素には.div-classというクラスが適用され、画像のURLを指定して背景画像として設定します。background-size: contain;によって画像がDIV内に収められ、background-repeat: no-repeat;によって繰り返し表示されないようになります。background-position: center;によって画像がDIV内で中央に配置されます。

以上が、画像をDIVに収めるためのシンプルで簡単な方法です。これらの方法を使用すると、画像が伸縮せずに適切に表示されます。必要に応じて、上記のコードをカスタマイズして使用してください。