Semantic-UI 图像标题内容

Semantic-UI 是一款流行的前端 UI 框架，提供了许多易于使用的组件。其中之一就是图像标题内容（Image, Header, Content）组合，可以用来展示具有一定复杂度的信息。

Image

图像组件可以用于显示图片或其他媒体类型的内容。可以使用以下属性来控制图像的大小、形状和样式：

• src: 图像的 URL
• size: 将图像缩放为指定大小。可选值：mini, tiny, small, medium, large, big, huge, massive
• shape: 图像的形状。可选值：circular, rounded, fluid
• centered: 当图像不满宽度时是否水平居中
• verticalAlign: 图像的垂直对齐方式。可选值：middle, top, bottom
• hidden: 是否隐藏图像

<!-- 基本用法 -->
![<Image>](https://semantic-ui.com/examples/assets/images/wireframe/image.png)

<!-- 缩放大小 -->
![<Image size='medium'>](https://semantic-ui.com/examples/assets/images/wireframe/image.png)

<!-- 圆形和圆角 -->
![<Image shape='circular' size='mini'>](https://semantic-ui.com/examples/assets/images/wireframe/image.png)
![<Image shape='rounded' size='mini'>](https://semantic-ui.com/examples/assets/images/wireframe/image.png)

<!-- 水平居中和垂直对齐 -->
![<Image size='small' centered verticalAlign='middle'>](https://semantic-ui.com/examples/assets/images/wireframe/image.png)

Header

标题组件可以用于显示标题文本。可以使用以下属性来控制标题的大小、样式和对齐方式：

• as: 标题使用的 HTML 元素类型。可选值：h1, h2, h3, h4, h5, h6, div
• size: 标题的大小。可选值：tiny, small, medium, large, huge
• icon: 标题左侧显示的图标
• image: 标题左侧显示的图像
• sub: 标题下方显示的副标题
• dividing: 是否加入分割线
• block: 是否以块级元素展示
• inverted: 是否反转标题颜色（白色标题黑色背景）

<!-- 基本用法 -->
# This is a header

<!-- 不同大小 -->
## This is a small header
### This is a tiny header

<!-- 带图标和副标题 -->
# <Header icon='users' sub='Management'> User Management </Header>

<!-- 左侧图片 -->
# <Header image='https://semantic-ui.com/images/avatar/large/patrick.png'> Patrick </Header>

<!-- 反转颜色 -->
# <Header inverted> Inverted Header </Header>

Content

内容组件可以用于显示大段文本或其他元素。可以使用以下属性来控制内容的样式和对齐方式：

• as: 内容使用的 HTML 元素类型。可选值：div, section, article
• size: 内容的大小。可选值：mini, tiny, small, medium, large, big, huge, massive
• aligned: 内容的对齐方式。可选值：left, center, right, justified

<!-- 基本用法 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<!-- 不同大小和对齐 -->
<p><Content size='large' aligned='center'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </Content></p>

<!-- 使用 section 元素 -->
<Content as='section'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </Content>

以上就是 Semantic-UI 图像标题内容的介绍。可以组合使用这三个组件来展示需要一定复杂度的信息。