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

Подскажите как лучше делать адаптивные изображения?
Недавно познакомился с таким способом: после загрузки страницы делать изображения фоном, а img удалять. Вроде все круто, но как это скажется на индексации.. И вообще кто нибудь так делает?
https://codepen.io/anon/pen/NaBEgb
  • Вопрос задан
  • 2081 просмотр
Пригласить эксперта
Ответы на вопрос 4
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Есть тег <picture> для показа разных изображений на разных экранах
2. height: auto для пропорций
3. позиционирование
4. object-fit для правильной обрезки, аналогичной bg size.

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

При наличии этого всего не понятно зачем нужна манипуляция превращения картинок в фон. Разве что кто-то знает js лучше, чем css.
Ответ написан
vollthegreat
@vollthegreat
Laravel back-end outsource
попробовать тег < picture > под размеры экрана...
Ответ написан
Комментировать
@Entoni12
Попробуйте устанавливать величины рисунка в "vh" и "vw".
Ответ написан
saintgeo23
@saintgeo23
Frontend-developer
Если известны размеры картинки, можно сделать так:
1. дать блоку position: relative и на выбор (роли не играет) padding-top или padding-bottom в процентах (высота рисунка / ширина рисунка * 100)
2. внутри абсолютно спозиционировать другой блок (все координаты по нулям)
3. внутрь абсолютного блока положить картинку width: 100%
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы