54Если вы хотите, чтобы картинка не растягивалась, но сохраняла свои пропорции, можно использовать свойство CSS max-width. Оно задает максимальную ширину элемента, которая может быть установлена в процентном или абсолютном значении.
Например, если вы хотите, чтобы картинка не растягивалась и не превышала своего оригинального размера, можно задать максимальную ширину в процентах, например:
img {
max-width: 100%;
height: auto;
}Здесь мы указываем, что максимальная ширина изображения должна быть равна 100% ширины его родительского элемента. Свойство height: auto позволяет сохранить пропорции изображения при изменении его размеров.
Если вы хотите, чтобы изображение не превышало конкретной ширины, можно задать максимальную ширину в пикселях, например:
img {
max-width: 500px;
height: auto;
}Здесь мы указываем, что максимальная ширина изображения не должна превышать 500 пикселей.
Если вы хотите, чтобы изображение заполняло свой родительский блок, но сохраняло свои пропорции, можно использовать свойство object-fit. Например:
img {
width: 100%;
height: 100%;
object-fit: contain;
}Здесь мы указываем, что изображение должно быть растянуто на всю ширину и высоту его родительского блока, но при этом должно сохранять свои пропорции и масштабироваться так, чтобы уместиться полностью в родительском блоке.
Важно помнить, что если установить фиксированную ширину и/или высоту для изображения, оно может быть растянуто или сжато, что может привести к искажениям изображения.
