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

# Images

## Rounded Images

<div class="example"><img src="../docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="Rounded Images"></div>

```html
<img src="http://openzui.com/docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="Rounded Images">
```

## Circular Images

<div class="example"><img src="../docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="Circular Images"></div>

```html
<img src="http://openzui.com/docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="Circular Images">
```

## Thumbnail

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

```html
<img src="http://openzui.com/docs/img/img3.jpg" width="200px" height="200px" class="img-thumbnail" alt="Thumbnail">
```

## Responsive Images

The maximum width of a responsive image should not exceed its parent container.

<div class="example">
  <div style="width: 250px;" class="panel">
    <div class="panel-heading">Max. Width: 250px</div>
    <img src="../docs/img/img4.jpg" class="img-responsive" alt="responsive image test">
  </div>
</div>

```html
<img src="http://openzui.com/docs/img/img4.jpg" width="200px" height="200px" class="img-responsive" alt="responsive image test">
```

<div class="alert with-icon">
  <i class="icon-smile"></i>
  <div class="content">
    <p>Image courtesy of <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a>.</p>
    <p class="margin-zero">Images are for ZUI demonstration. Images shall not be used for other purposes without the author's authorization.</p>
  </div>
</div>
