Изображения.... В каких случаях вставлять в css через background, а в каких в html через тег img? Как сделать изображение адаптивным?

Question

[Alex_87]

Здравствуйте! Подскажите пожалуйста следующее... Существует 2 вида вставки изображения: 1 - в сss, 2 - в html. Как определить, в каком случае вставлять изображение в css, а в каком в html? И главный вопрос: Как сделать адаптивным изображение в том и в другом случае? Спасибо!

Answer 1

[Егор Живагин]

Очень просто на самом деле. Если вам нужен именно фон - ставьте фон в css. Если картинка - самостоятельный элемент -

Кажется, это очевидно, но нужно просто научиться понимать, какая роль у изображения в вашем случае.

Про адаптивность: В работе с фоновой картинкой почти всегда хватает background-size: cover / contain .
Если картинка в html, то тут уже поинтереснее. Самый распространённый вариант - ширина в процентах + не указывать высоту.

Comments

[Alex_87]

Не знал, что в зависимости от того где картинка, разные приёмы для её адаптивности... То есть, если в html img(с картинкой) то получается, что background-size: cover не сработает. Я просто ещё об этом не задумывался. Спасибо! А, когда вы говорите о фоне в css, вы имеете ввиду и картинку или только цвет фона? ... И есть ли какая-нибудь хорошая статья об изображениях, рассказывающая обо всём, что касается адаптивки фона и картинок?

[Егор Живагин]

Alex_87: про фон - background-image . Цвет-то чего адаптировать?)) background-size работает с фоном блока, тэг img - отдельный блок, это не фон.

Статью одну не назову, но Гугл тонну ответов на кидает на запрос "адаптивность картинок css"

[Alex_87]

Егор Живагин: Да фигню он кидает, а не ответы... Вот пример... не раз кидал ответы, где писали, что блоку нужно прописывать вот такие параметры:
Но по высоте адаптивка не работает. Появляется вертикальный скролл. Даже больше скажу... Если расположить параметр height: auto; ниже параметра height: фиксированное значение, картинка(фон) вообще не будет отображаться! А если наоборот расположить, то сам параметр не работает. Что делать?
P.S. Да, с цветом погорячился)

[Егор Живагин]

Alex_87: сделайте codepen конкретно с вашими стилями, или сайт покажите, так не очень понятно, что именно не работает и почему)

display: block; - стандартное поведение, его необязательно писать.
При адаптиве фиксировать размеры крайне нежелательно. Этот ответ - рабочий, задумка в том что картинка в ширину такая же, как родительский элемент, а высота подстраивается в зависимости от размеров изображения. Можно поставить не max-width, а width и посмотреть, что будет (но с max способ универсальнее). На всякий случай скажу - этот способ для тэга , не для фона

[Alex_87]

Егор Живагин: к сожалению, я не могу показать вам код в Codepen, поскольку структура моего проекта такова:

Но, вот мой код (html и css)

Правильный он, или стоит его дополнить/исправить?

[Alex_87]

Егор Живагин: И ещё...
А если у меня внутри блок с шрифтами(текстом), что с ним лучше сделать? Кому блоку ставить размер(родительскому или дочернему) и в какой единицей измерения?

Answer 2

[Rheinmetall]

В любых случаях хоть так хоть эдак. Смотришь на конкретный случай и думаешь как тебе будет удобнее и правильнее.

Answer 3

[Negwereth]

Если это иллюстрация — img
Если это декоративный элемент — css

Это общие случаи. Бывают исключения.

Comments

[Alex_87]

Я знаю, что есть сайт с официальной документацией: www.w3.org Я не пользовался раньше, а когда сейчас зашёл, многое не понятно... Как найти конкретные статьи, где описывается про адаптивные изображения, ну и те моменты, где что писать. К примеру, фон может быть картинкой, а не только цветом? А если внутри такого фона есть текст? Что тогда делать? Как лучше сжимать текст, в проценты переводить? А это правильно? Спасибо!