Изображения в карточках

Почему изображения для компонента карты используются в качестве фона вместо изображения, чтобы заполнить медиа-часть карты? возможно, мы просто используем тег изображения?Изображения в карточках

Я пытаюсь использовать рамки MDL, чтобы сделать шаблон Tumblr , но возник проблемы реализации компоненты карты для сообщений изображений, поскольку Tumblr использует тег изображений

пожалуйста, объясните, почему MDL используют изображения в качестве фона для карты компонент

источник

2015-07-13 LCallaghan84

Приведенные примеры просто используют фоновое изображение. Вы можете вставить стандартный тег img, который вы хотите, вместе с любым другим тегом мультимедиа. Нет жесткого правила в отношении добавления СМИ через CSS. Это делается в примерах, поскольку средства массовой информации не являются основной частью карт, а стилистическим улучшением. – Garbee

Ничего не мешает вам с помощью тега img. См. Пример this.

Однако использование изображений в качестве фона div с имеет ряд преимуществ:

Щелчок правой кнопкой мыши на изображение не позволяет загружать изображения
У вас есть больше гибкости в плане реагирования (например, с помощью background-size: cover для заполнения div). UPDATE:, хотя вы можете установить 100% по ширине/высоте для адаптации изображения, cover сохраняет соотношение сторон и в целом обеспечивает лучшие результаты.
С вашего изображения просто фон вам не нужно, чтобы установить свою позицию в absolute, чтобы другие элементы внутри div быть расположен над изображением (как это имеет место во всех примерах MDL)

источник

2015-07-13 14:41:38

Да, но tumblr не работает таким образом, мне нужно было бы как-то сделать класс динамической карты для каждого изображения, который будет использоваться, что кажется сложным – LCallaghan84

Вы создаете новую тему tumblr? Кажется, я не понимаю эту проблему. Вы видели пример кода, который я отправил? –

Вы можете увеличить ширину/высоту 100% носителя в медиа-элементе, чтобы заставить их быть в большей степени отзывчивыми. Таким образом, точка 2 полностью достижима без решения изображения с CSS. Мы не делаем этого по умолчанию, так как это может изменить отношение изображений, которые люди помещают туда, и это не приятно. – Garbee

Изображения в карточках

ответ

Смежные вопросы