Адаптация под мелкие экраны img?

Question

[art style]

допустим я делаю дизайн для экрана 1920х
далее я делаю адаптацию для экранов 1200, 700, 400 и тд
как правильно манипулировать размером изображения чтобы оно адаптировалось под экран ? а если оно указано в пикселях? или нужно в ручную подгонять изображение под каждый экран?

Comments

[Максим]

укажите в процентах или используйте srcset

[art style]

Много Чего, какие свойства должны быть для фото чтобы оно грамотно работало? допустим мне надо изображение с

position: absolute
width: 100%
height: auto??

но оно так не всегда работает

[Максим]

art style, absolute для чего ?

[Иван Иванов]

art style, в bootstrap это сделано так

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

[art style]

Много Чего, анимация + не шаблонный дизайн поэтому нет блоков

[art style]

Иван Иванов, https://vk.cc/aBXWLG
ага, чет нефига не работает, приходится жестко задавать пикселями

[Максим]

art style, смотри https://codepen.io/topicstarter/pen/wvWXYEd видишь ? изображение достаточно хорошо тянется

[art style]

Много Чего, хм. странно я сверстал получается

[Максим]

art style, удали убсолют

[art style]

Много Чего, тогда придется все переверстывать. изо идут друг за другом. и обернуты во враппер.. не знаю почему я так сделал но начало работать именно так

[Максим]

art style, смотри - я чуть чуть подправил анимацию и размеры изображения ну и соответственно class которые ты использовал и разумеется что картинки машинок стали резиновыми : https://codepen.io/topicstarter/pen/ZEORmLZ

[art style]

Много Чего, у меня они не на всю ширину. но принцип понятен... надо переверстывать

[Максим]

art style, да вроде всё в ёлочку там - сними скриншот

[art style]

Answer 1

[Тимур Худиев]

Не задавайте жестких размеров для изображения, только если это не статичные иконки, которые одинаковы везде. А тем более не стоит этого делать под каждое разрешение. Так как на 700 будет норм, а минус один пиксель и все, хана) Можно для изображений по-умолчанию прописать

display: inline-block;
max-width: 100%;
height: auto;

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