31 lines
4.0 KiB
Markdown
31 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 или авто)
|
||
|
||
#### Дополнительная информация:
|
||
|
||
##### Cвойства
|
||
|
||
[`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 объекта-объекта определяет выравнивание выбранного элемента внутри его поля.")
|
||
|
||
##### Aункции
|
||
|
||
[`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 "Документация об этом еще не написана; рассмотрите возможность внесения вклада!")
|