Изображения.... В каких случаях вставлять в css через background, а в каких в html через тег img? Как сделать изображение адаптивным?
Здравствуйте! Подскажите пожалуйста следующее... Существует 2 вида вставки изображения: 1 - в сss, 2 - в html. Как определить, в каком случае вставлять изображение в css, а в каком в html? И главный вопрос: Как сделать адаптивным изображение в том и в другом случае? Спасибо!
Очень просто на самом деле. Если вам нужен именно фон - ставьте фон в css. Если картинка - самостоятельный элемент -
Кажется, это очевидно, но нужно просто научиться понимать, какая роль у изображения в вашем случае.
Про адаптивность: В работе с фоновой картинкой почти всегда хватает background-size: cover / contain .
Если картинка в html, то тут уже поинтереснее. Самый распространённый вариант - ширина в процентах + не указывать высоту.
Не знал, что в зависимости от того где картинка, разные приёмы для её адаптивности... То есть, если в html img(с картинкой) то получается, что background-size: cover не сработает. Я просто ещё об этом не задумывался. Спасибо! А, когда вы говорите о фоне в css, вы имеете ввиду и картинку или только цвет фона? ... И есть ли какая-нибудь хорошая статья об изображениях, рассказывающая обо всём, что касается адаптивки фона и картинок?
Егор Живагин: Да фигню он кидает, а не ответы... Вот пример... не раз кидал ответы, где писали, что блоку нужно прописывать вот такие параметры:
Но по высоте адаптивка не работает. Появляется вертикальный скролл. Даже больше скажу... Если расположить параметр height: auto; ниже параметра height: фиксированное значение, картинка(фон) вообще не будет отображаться! А если наоборот расположить, то сам параметр не работает. Что делать?
P.S. Да, с цветом погорячился)
Alex_87: сделайте codepen конкретно с вашими стилями, или сайт покажите, так не очень понятно, что именно не работает и почему)
display: block; - стандартное поведение, его необязательно писать.
При адаптиве фиксировать размеры крайне нежелательно. Этот ответ - рабочий, задумка в том что картинка в ширину такая же, как родительский элемент, а высота подстраивается в зависимости от размеров изображения. Можно поставить не max-width, а width и посмотреть, что будет (но с max способ универсальнее). На всякий случай скажу - этот способ для тэга , не для фона
Егор Живагин: к сожалению, я не могу показать вам код в Codepen, поскольку структура моего проекта такова:
Но, вот мой код (html и css)
Правильный он, или стоит его дополнить/исправить?
Егор Живагин: И ещё...
А если у меня внутри блок с шрифтами(текстом), что с ним лучше сделать? Кому блоку ставить размер(родительскому или дочернему) и в какой единицей измерения?
Я знаю, что есть сайт с официальной документацией: www.w3.org Я не пользовался раньше, а когда сейчас зашёл, многое не понятно... Как найти конкретные статьи, где описывается про адаптивные изображения, ну и те моменты, где что писать. К примеру, фон может быть картинкой, а не только цветом? А если внутри такого фона есть текст? Что тогда делать? Как лучше сжимать текст, в проценты переводить? А это правильно? Спасибо!
