Css img src: html — Как установить атрибут src тега img через css?

Содержание

HTML-заполнение изображений | Как работает заполнение изображения в HTML или CSS?

Свойство padding в html дает пространство вокруг содержимого самого внутреннего элемента коробчатой ​​структуры. Свойство margin в html дает пространство вокруг содержимого самого внешнего элемента коробчатой ​​структуры. Пространство вокруг отступов и полей называется рамкой.

Разницу между отступами, полями и границей вы можете увидеть ниже:

  • Поскольку мы знаем общие стили на всех страницах, мы всегда предпочитали CSS HTML.
  • Все общие свойства реализованы только в CSS.

Как работает заполнение изображения в HTML или CSS?

  • Заполнение всегда создается пространством между самыми внутренними частями, будь то изображение или контент.
  • Заполнение изображением определяется тегом img только в CSS.

Синтаксис 1:

 изображение
{
Отступы: 10 пикселей, 10 пикселей, 10 пикселей, 10 пикселей; //заполнение позиций
} 

Синтаксис 1 Объяснение:

Если мы применим отступы с 4 значениями, то первое значение будет для верха, второе значение для правого, третье значение для нижнего и четвертое значение для левый применил соответственно.

Синтаксис 2:

 изображение
{
Отступы: 10 пикселей, 10 пикселей, 10 пикселей; //заполнение позиций
} 

Объяснение синтаксиса:

Если мы применяем заполнение с 3 значениями, то первое значение применяется для верхнего края, второе значение — для левого и правого, третье значение — для нижнего края соответственно.

Синтаксис 3:

 изображение
{
Отступы: 10 пикселей, 10 пикселей; //заполнение позиций
} 

Объяснение синтаксиса:

Если мы применяем отступы с 2 значениями, то первое значение применяется для верхнего и нижнего края, а второе значение — для левого и правого, соответственно.

Синтаксис 4:

 изображение
{
Отступ: 10 пикселей; //заполнение позиций
} 

Объяснение синтаксиса:

Если мы применяем отступ только с одиночными значениями, то применяем его ко всем четырем сторонам одинаково.

Примеры заполнения изображений HTML

Ниже приведены примеры заполнения изображений HTML:

Пример №1. Заполнение изображения с 4 значениями заполнения

Код HTML:

 

<голова>
Заполнение изображения


<тело>

 

Изображение без заполнения

<р>

Изображение с отступами

<р>

Код CSS:

 .noPadding
{
ширина: 400 пикселей;
высота: 400 пикселей;
граница: 5px сплошной коричневый;
}
.padding
{
ширина: 400 пикселей;
высота: 400 пикселей;
отступ: 50px 50px 50px 50px;
} 

Вывод:

Вывод до применения заполнения:

Вывод после применения заполнения:

900 02 Объяснение:

  • Имя класса первого изображения, noPadding и имя класса второго изображения отступы взяты в HTML-коде в приведенном выше коде.
  • В коде CSS класс noPadding имеет без отступов с границей 5px. Отсутствие отступов не дает никакого пространства вокруг изображения. Он строго прилегает к границе. Вы можете увидеть это на изображении 1 st  выше.
  • Класс Padding имеет отступы 50px и границу 50px. Из-за этого отступа вокруг изображения мы увидели некоторое пространство от границы. Вы можете увидеть это на изображении 2 nd .
Пример №2 — заполнение изображения с 3 значениями заполнения

HTML-код:

 

<голова>
Заполнение изображения
<тело>

Изображение без заполнения

<р>

Изображение с отступами

<р>

Код CSS:

 . noPadding
{
ширина: 400 пикселей;
высота: 400 пикселей;
граница: 5 пикселей сплошного желтого цвета;
}
.padding
{
ширина: 400 пикселей;
высота: 400 пикселей;
отступ: 50px 20px 50px;
граница: 5 пикселей сплошного желтого цвета;
} 

Вывод:

Вывод до применения заполнения:

Вывод после применения заполнения:

900 02 Объяснение:

  • В приведенном выше коде первое имя класса изображения, noPadding и второе имя класса изображения заполнено кодом HTML.
  • В коде CSS класс noPadding имеет без отступов с границей 5px. Отсутствие отступов не дает никакого пространства вокруг изображения. Он строго прилегает к границе. Вы можете увидеть это на изображении 1
    st 
    выше.
  • Класс Padding имеет отступы 50px 20px 50px и границу 5px. Из-за этого отступы вокруг изображения сверху на 50 пикселей, слева и справа на 20 пикселей и на 50 пикселей внизу соответственно. Мы видели некоторое пространство от границы. Вы можете увидеть в 2 и изображение.
Пример №3. Заполнение изображения с 3 значениями заполнения

Код HTML:

 

<голова>
Заполнение изображения


<тело>

 

Изображение без заполнения

<р>

Изображение с отступами

<р>

Код CSS:

 .noPadding
{
ширина: 400 пикселей;
высота: 400 пикселей;
граница: 5 пикселей сплошного желтого цвета;
}
.padding
{
ширина: 400 пикселей;
высота: 400 пикселей;
отступ: 75px 50px;
граница: 5 пикселей сплошного желтого цвета;
} 

Вывод:

Вывод до применения заполнения:

Вывод после применения заполнения:

900 02 Объяснение:

  • Имя класса первого изображения, noPadding и имя класса второго изображения отступы взяты в HTML-коде в приведенном выше коде.
  • В коде CSS класс noPadding имеет без отступов с границей 5px. Отсутствие отступов не дает никакого пространства вокруг изображения. Он строго прилегает к границе. Вы можете увидеть это на изображении 1
    st
    выше.
  • Класс Padding имеет отступы 75px 50px и границу 5px. Из-за этого отступы вокруг изображения сверху и снизу по 50 пикселей, а слева и справа по 50 пикселей соответственно. Мы видели некоторое пространство от границы. Вы можете увидеть это на изображении 2 nd .
Пример № 4. Заполнение изображения с одним значением заполнения

Код HTML:

 

<голова>
Заполнение изображения


<тело>

 

Изображение без заполнения

<р>

Изображение с отступами

<р> jpg">

Код CSS:

 .noPadding
{
ширина: 400 пикселей;
высота: 400 пикселей;
граница: 5 пикселей сплошного синего цвета;
}
.padding
{
ширина: 400 пикселей;
высота: 400 пикселей;
отступ: 70 пикселей;
граница: 5 пикселей сплошного синего цвета;
} 

Вывод:

Вывод до применения заполнения:

Вывод после применения заполнения:

900 02 Объяснение:

  • Имя класса первого изображения, noPadding и имя класса второго изображения отступы взяты в HTML-коде в приведенном выше коде.
  • В коде CSS класс noPadding имеет без отступов с границей 5px. Отсутствие отступов не дает никакого пространства вокруг изображения. Он строго прилегает к границе. Вы можете увидеть это на изображении 1 st  выше.
  • Класс Padding имеет отступы 70 и границу 5px. Из-за этого отступ вокруг изображения сверху, слева, справа и снизу составляет 70 пикселей соответственно.
    Мы видели некоторое пространство от границы. Вы можете увидеть это на изображении 2 nd .

Если мы хотим применить только определенные боковые отступы, CSS предоставляет предопределенные свойства:

  • Padding-left: 10px: применить отступ 10px к левой стороне.
  • Padding-right: 10px: применить отступ 10px справа.
  • Padding-top: 10px: применить отступ 10px к верхней стороне.
  • Padding-bottom: 10px: применить отступ 10px снизу.

Примечание: Чтобы включить файл css в html, используйте тег.

Вывод

Заполнение изображения дает пространство вокруг самой внутренней части. Мы можем применить одно, два, три и четыре значения с отступом внутри тега img.

Рекомендуемые статьи

Это руководство по заполнению изображений HTML. Здесь мы обсудим введение, примеры и то, как работает дополнение изображения в HTML или CSS. Вы также можете ознакомиться со следующими статьями, чтобы узнать больше:

  1. Тег Span в HTML
  2. Фон таблицы HTML
  3. Отзывчивый в HTML
  4. HTML с плавающей запятой влево

Работа с изображениями в JavaScript. В этом руководстве по JavaScript вы… | Раджа Тамил | Стартап

JavaScript, работающий с изображениями. В этом руководстве по JavaScript вы… | Раджа Тамил | Стартап | Medium

Опубликовано в

·

Чтение: 8 мин.

·

7 декабря 2020 г.

с изображениями.

Создайте тег статического изображения с атрибутом src с URL-адресом изображения в файле HTML.

  

Автор Raja Tamil

161 Последователи

· Автор для

Инструктор/O Владелец SoftAuthor! http://softauthor. com/

Еще от Raja Tamil и The Startup

Raja Tamil

in

Объяснение адаптивного многоколоночного макета CSS Flexbox

В этой статье я покажу вам, как легко создавать адаптивные многоколоночные макеты для мобильных устройств с помощью CSS Flexbox.

·Чтение через 10 минут·8 марта 2021 г.

Zulie Rane

в

Если вы хотите стать творцом, удалите все (кроме двух) платформы социальных сетей

900 16 В октябре 2022 г. в течение всего Фиаско Илона Маска, я наконец-то удалил Твиттер со своего телефона. Примерно в то же время я также вышел из…

·Чтение через 8 мин·19 апреля

Нитин Шарма

в

До свидания, ChatGPT: Вот (новые) инструменты искусственного интеллекта, которые поразят вас

Держу пари, что 99% читателей не знакомы с любой из этих инструментов.

·6 мин чтения·5 апреля

Raja Tamil

Общие ошибки и решения Google Maps API

1.

Только для целей разработки

9030 5 ·4 минуты чтения·4 января 2021 г.

Просмотреть все от Раджа Тамил

Рекомендуется на Medium

bitbug

в

Как преобразовать изображение в Base64 с помощью Javascript

Canvas или FileReader можно использовать для преобразования данных изображения в строку base64 003

·4 минуты чтения·16 января

The PyCoach

в

Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT

Овладейте ChatGPT, изучив технику быстрого доступа.

·Чтение через 7 мин·Мар 17

Списки

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·28 сохранений

Лидерство

30 историй·10 сохранений

Как проводить более содержательные встречи 1:1 903 23

11 этажей·14 сохранений

Истории, которые помогут вам повысить свой уровень на работе

19 историй·22 сохранения

Сомнатх Сингх

в

Кодирование перестанет существовать через 5 лет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *