Как сделать адаптивное изображение в блоке?

Question

[darksladen]

Подскажите как лучше делать адаптивные изображения?
Недавно познакомился с таким способом: после загрузки страницы делать изображения фоном, а img удалять. Вроде все круто, но как это скажется на индексации.. И вообще кто нибудь так делает?
https://codepen.io/anon/pen/NaBEgb

Comments

[kulaeff]

А зачем такие манипуляции? Можно же сразу блоку задать фоновую картину с background-size: cover;

[darksladen]

kulaeff, подозреваю, чтобы изображения в индекс попали..

Answer 1

[Ankhena]

1. Есть тег <picture> для показа разных изображений на разных экранах
2. height: auto для пропорций
3. позиционирование
4. object-fit для правильной обрезки, аналогичной bg size.

Про то, что картинки можно готовить заранее правильных пропорций лучше промолчу.

При наличии этого всего не понятно зачем нужна манипуляция превращения картинок в фон. Разве что кто-то знает js лучше, чем css.

Comments

[Ankhena]

darksladen Еще блок всегда правильных пропорций, который удобно использовать для <figure> в который вкладывается изображение https://jsfiddle.net/Ankhena/cLhxv7eq/

[Camaro67]

<picture> не кросс-браузерный, в частности IE его совсем не поддерживает.

[Ankhena]

Camaro67, таки есть полифил scottjehl.github.io/picturefill

Answer 2

[Voll .]

попробовать тег < picture > под размеры экрана...

Answer 3

[Entoni12]

Попробуйте устанавливать величины рисунка в "vh" и "vw".

Comments

[darksladen]

Объясните, зачем? Зачем изображение должно зависеть от высоты и ширины окна?

Answer 4

[Георгий Волокитин]

Если известны размеры картинки, можно сделать так:
1. дать блоку position: relative и на выбор (роли не играет) padding-top или padding-bottom в процентах (высота рисунка / ширина рисунка * 100)
2. внутри абсолютно спозиционировать другой блок (все координаты по нулям)
3. внутрь абсолютного блока положить картинку width: 100%