Как правильно прописать картинку — через тег img или background url?

Question

[zjoin]

Как считается правильным? И есть какое-то правило? Можно ли background галереи картинки прописать путь через css? Или разница только логическая?

Answer 1

[Константин Величко]

Контент должен быть в контенте, так что img

Answer 2

[Александр Хиренко]

Не только логическая, у Вас теряется масса возможностей работы с изображением при использовании background, например, картинку нельзя сохранить или копировать URL, что не совсем удобно, тем более в галерее. Еще картинку не будут видеть соц. сети и поисковики и еще много ограничений.
Зачем Вам понадобилось в галерее отображать картинку как background?

Comments

[zjoin]

Экспериментирую с masonry. Там многие галереи с картинками реализованы через background url

Answer 3

[link_irk]

Разница в том, что изображение встроенное тегом img является отдельным объектом в DOM страницы. Такие картинки можно масштабировать средствами браузера и позиционировать как inline-block объекты. Если же картинку делаете фоном какого-то объекта, то масштабировать её не получится, позиционирование на странице будет наследоваться от родителя, а внутри объекта при помощи background-position.
В случае с фоновой картинкой, поверх неё можно размещать другие объекты и текст.
Если изображение должно быть кликабельно, то вариант<a href="#"><img src="./img.png" alt="Image"></a> будет работать как и предполагается, а вот если картинка, например, является фоном div'а, то div обернуть в тег <a> уже не получится, придётся ставить её внутри div'а и позиционировать уже внутри блока отдельно.

Comments

[Павел Волынцев]

Масштабировать background можно