Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Хотите получать заявки моментально? Вся наша команда и партнеры приступят к проекту, подключив также продвижение Авито. Подходит для тех, кого не удовлетворяет имеющийся объем продаж. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение + Авито продвижение.

от 189000 

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Услуги веб дизайна под ключ.

от 29500 

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

Если вы хотите, чтобы картинка не растягивалась, но сохраняла свои пропорции, можно использовать свойство 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;
}

Здесь мы указываем, что изображение должно быть растянуто на всю ширину и высоту его родительского блока, но при этом должно сохранять свои пропорции и масштабироваться так, чтобы уместиться полностью в родительском блоке.

Важно помнить, что если установить фиксированную ширину и/или высоту для изображения, оно может быть растянуто или сжато, что может привести к искажениям изображения.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

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

Меню

Оставить заявку

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