Как сделать чтобы изображение не растягивалось css

Чтобы изображение не растягивалось в CSS, можно использовать несколько методов.

1. Установить максимальную ширину и высоту для изображения равную его оригинальному размеру:

img {
  max-width: 100%;
  height: auto;
  max-height: /* Вставьте оригинальную высоту изображения */;
}

2. Установить фон-изображение для элемента, а также установить размер фона равный его оригинальному размеру:

.element {
  background-image: url('your-image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 100%;
  max-height: /* Вставьте оригинальную высоту изображения */;
}

3. Использовать объект img в элементе с фиксированным размером, который будет показывать изображение, без его изменения размеров:

.element {
  width: /* ширина */;
  height: /* высота */;
  position: relative;
}

.element img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

Это позволит создать блок с фиксированным размером, в котором объект img будет находиться по центру блока и не будет искажать пропорции.