Amaze UI

Image


定义图片样式。

基础用法

基础样式定义在 base 中。

img {
  box-sizing: border-box;
  /* v2.3 开始移除以下代码,详见 #502 */
  /* max-width: 100%;
  height: auto;*/
  vertical-align: middle;
  border: 0;
}

响应式用法

Copy
<img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/>

<img> 元素设置 .am-img-responsive class,即可实现响应式效果。

在线运行

圆角样式

140*140 140*140

Copy
<p>
  <img class="am-radius" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140" />
  <img class="am-round" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/600/q/80" width="200" height="120"/>
  <img class="am-circle" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140"/>
</p>

<img> 元素设置不同的 class,增强其样式。

  • .am-radius 圆角
  • .am-round 椭圆
  • .am-circle 圆形,一般用于正方形的图片

在线运行

边框样式

140*140 140*140 140*140
Copy
<img class="am-img-thumbnail" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140" />
<img class="am-img-thumbnail am-radius" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140" />
<img class="am-img-thumbnail am-circle" alt="140*140" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140" />

<img> 元素设置 .am-img-thumbnail class,实现边框效果。

在线运行