zui/docs/part/control-image.md

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

section: control
id: image
description: 为图片应用样式
icon: icon-picture
filter: tupian tp
---

# 图片

## 圆角图片

<div class="example"><img src="docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="圆角图片"></div>

```html
<img src="http://zui.sexy/docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="圆角图片">
```

## 圆形图片

<div class="example"><img src="docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="圆形图片"></div>

```html
<img src="http://zui.sexy/docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="圆形图片">
```

## 缩略图

<div class="example"><img src="docs/img/img3.jpg" width="200px" height="200px" class="img-thumbnail" alt="缩略图"></div>

```html
<img src="http://zui.sexy/docs/img/img3.jpg" width="200px" height="200px" class="img-thumbnail" alt="缩略图">
```

## 响应式图片

图片最大宽度将不会超过父级容器。

<div class="example">
  <div style="width: 250px;" class="panel">
    <div class="panel-heading">我的宽度限定为250px</div>
    <img src="docs/img/img4.jpg" class="img-responsive" alt="响应式图片测试">
  </div>
</div>

```html
<img src="http://zui.sexy/docs/img/img4.jpg" width="200px" height="200px" class="img-responsive" alt="响应式图片测试">
```

<div class="alert with-icon">
  <i class="icon-smile"></i>
  <div class="content">
    <p>非常感谢 <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a> 为本章节提供演示所用的全部图片。</p>
    <p class="margin-zero">图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。</p>
  </div>
</div>