Image

Define the styles for image。

Default Style

Default style is defined in base.

img {
  box-sizing: border-box;
  /* Codes below is removed in v2.3, find more detail in issue #502 */
  /* max-width: 100%;
  height: auto;*/
  vertical-align: middle;
  border: 0;
}

Responsive Image

Max width has been removed in v2.3 to solve #502. New class .am-img-responsive is added.

<img src="https://amazeui.github.io/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/>

Enhanced Styles

Round Cornor

Use following classes to give round cornor to <img>.

.am-radius Round Cornor
.am-round Ellipse
.am-circle Circle

140*140 140*140

<p>
  <img class="am-radius" alt="140*140" src="https://amazeui.github.io/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="https://amazeui.github.io/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="https://amazeui.github.io/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/1000/h/1000/q/80" width="140" height="140"/>
</p>

Border

.am-img-thumbnail Border

<img src="..." alt="..." class="am-img-thumbnail">
<img src="..." alt="..." class="am-img-thumbnail am-radius">
<img src="..." alt="..." class="am-img-thumbnail am-circle">

Amaze UI 2.4

CSS

TOC