30 lines
4.0 KiB
Markdown
30 lines
4.0 KiB
Markdown
|
---
|
|||
|
|
title: CSS Images
|
|||
|
|
localeTitle: Изображения CSS
|
|||
|
|
---
|
|||
|
|
## Изображения CSS
|
|||
|
|
|
|||
|
|
Это помогает добавить изображение на сайт.
|
|||
|
|
|
|||
|
|
#### Образец кода
|
|||
|
|
|
|||
|
|
`<img src="picture.jpg" alt="Picture" width="100" height="100">`
|
|||
|
|
|
|||
|
|
* **src:** Он состоит из значения пути к требуемому изображению
|
|||
|
|
* **alt:** Если изображение не отображается, альтернативный текст может отображаться с использованием атрибута alt.
|
|||
|
|
* **width:** Указывает ширину изображения (может быть% или px или auto)
|
|||
|
|
* **height:** Указывает высоту изображения (может быть процент или px или авто)
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
##### свойства
|
|||
|
|
|
|||
|
|
[`image-orientation`](/en-US/docs/Web/CSS/image-orientation "Свойство CSS ориентации изображения описывает, как исправить ориентацию изображения по умолчанию.") [`image-rendering`](/en-US/docs/Web/CSS/image-rendering "Свойство CSS-рендеринга изображения дает подсказку браузеру об алгоритме, который он должен использовать для масштабирования изображений.") [`object-fit`](/en-US/docs/Web/CSS/object-fit "Объектно-ориентированное свойство CSS указывает, как изменить размер заменяемого элемента, такого как <img> или <video>, чтобы он соответствовал его контейнеру.") [`object-position`](/en-US/docs/Web/CSS/object-position "Свойство CSS объекта-объекта определяет выравнивание выбранного элемента внутри его поля.")
|
|||
|
|
|
|||
|
|
##### функции
|
|||
|
|
|
|||
|
|
[`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient "Документация об этом еще не написана; рассмотрите возможность внесения вклада!") [`radial-gradient()`](/en-US/docs/Web/CSS/radial-gradient "Документация об этом еще не написана; рассмотрите возможность внесения вклада!") [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/repeating-linear-gradient "Документация об этом еще не написана; рассмотрите возможность внесения вклада!") [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/repeating-radial-gradient "Документация об этом еще не написана; рассмотрите возможность внесения вклада!") [`element()`](/en-US/docs/Web/CSS/element "Документация об этом еще не написана; рассмотрите возможность внесения вклада!")
|
|||
|
|
|
|||
|
|
##### Типы данных
|
|||
|
|
|
|||
|
|
[`<image>`](/en-US/docs/Web/CSS/image "Тип данных <image> CSS представляет собой двумерное изображение. Существует два типа изображений: простые изображения, обычно используемые с использованием URL-адреса, и динамически генерируемые изображения, например, созданные с помощью <gradient> или element (). Изображения могут использоваться с многочисленными свойствами CSS, такими как background-image, border-image, content, list-style-image и cursor.") [`<uri>`](/en-US/docs/Web/CSS/uri "Документация об этом еще не написана; рассмотрите возможность внесения вклада!")
|