Чтобы предотвратить сжатие картинки, когда ее размер превышает доступное пространство, вы можете использовать свойство CSS min-width.

img {
  min-width: 100%;
  height: auto;
}

В приведенном выше примере свойство min-width установлено на 100%, что означает, что изображение будет автоматически масштабироваться по ширине, чтобы занять 100% доступной ширины. Свойство height установлено на auto, чтобы сохранить соотношение сторон изображения.

Вы также можете использовать свойство max-width, чтобы задать максимальную ширину изображения и предотвратить его растяжение.

img {
  max-width: 100%;
  height: auto;
}

В этом случае изображение будет масштабироваться только до определенного предела, заданного свойством max-width. Если ширина доступной области меньше, чем максимально допустимая ширина изображения, то изображение сжимается, чтобы поместиться в доступную область.

Обратите внимание, что если изображение меньше, чем доступное пространство, то оно будет масштабироваться соответственно, используя любой из перечисленных выше методов.