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

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

  • автор:

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

background: url(«http://www.auto-mehanika.ru/image/I00039229.jpg») center center no-repeat; — задаем задний фон картинкой и центрируем ее (по вертикали и горизонтали) с помощью center center , а так же задаем на всякий случай no-repeat , чтобы картинка не превратилась в «узор». На будущее, если хочешь ставить какую-либо картинку на задний план — используй то, background: . + background-size: cover; (заполнить фон полностью), но в твоем случае нужен background-size: contain; (показать картинку полностью)

про флекс особо не могу сказать. Долго.

html, body < width:100%; height: 100%; >.block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; >.block > div < width: 100%; height: 100%; >.img1 < background: url("https://i1.quto.ru/p1024x768/53fc737ba1dae.jpeg") center center no-repeat; background-size: contain; >.img2< background: url("https://i1.quto.ru/p1024x768/53fc737ba1dae.jpeg") center center no-repeat; background-size: contain; >

«Умный» ресайз картинок на CSS?

Я незнаю как чётко сформулировать свой вопрос, поэтому в гугл слать безполезно я просто не знаю что спросить его.

Буду объяснять свои мысли. Смотрите вот скриншот:

5c909a2e674241e79dc980ec48fabb81.png

Мне нужно что бы картинка была шириной в 100%, но если так сделать она растягивается и теряет пропорции — одним словом ужас.

Как сделать через CSS ресайз картинки, так, что бы она не теряла пропорции, а просто немного обрезалась?

  • Вопрос задан более трёх лет назад
  • 16390 просмотров

2 комментария

Оценить 2 комментария

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

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

Например, если у вас есть изображение с классом my-image , вы можете использовать следующий CSS-код:

.my-image  max-width: 100%; max-height: 100%; > 

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

Как сделать так чтобы картинка не растягивала DIV, а «вписывалась» в него изменяя свои размеры?

Правило overflow: hidden; для DIV-а заставит картинку обрезаться по размеру блока, а задание width=»100%» для IMG-а заставит картинку подгонять свой размер под размер блока.. . Но будьте внимательны — если размер блока будет больше размеров картинки, картинка растянется, соответственно, с ухудшением качества.

Остальные ответы

ту ты сказанул! по-моему, так нельзя.

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

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