amazeui學習筆記--css（HTML元素4）--圖片image

一、總結

1、響應式圖片：隨著頁面寬度而變化?.am-img-responsive?class。?<img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/>

2、圓角橢圓圓形樣式和button里面一樣：am-radius? ? ?am-round? ? am-circle

3、邊框：am-image-thumbnail，邊框倒是加上了img模塊名，因為可能不同標簽的邊框不同??<img src="..." alt="..." class="am-img-thumbnail am-circle">

?

二、圖片image

目錄

• 基礎樣式
• 響應式圖片
• 增強樣式
  • 圓角樣式
  • 邊框

定義圖片樣式。

基礎樣式

基礎樣式定義在?base?中。

?Copy img {box-sizing: border-box;/* v2.3 開始移除以下代碼，詳見 #502 *//* max-width: 100%;height: auto;*/vertical-align: middle; border: 0; }

響應式圖片

如上面的代碼所示，?base?里已經設置了?max-width: 100%，圖片會自動適應到容器的寬度（但不會超過圖片原始寬度），不需要添加額外的 class（演示）。如果要讓圖片始終和容器一樣寬，需要設置?width: 100%。

v2.3?為解決?#502，基礎樣式中取消了圖片最大寬度設置，新增了?.am-img-responsive?class。

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

增強樣式

圓角樣式

為<img>元素設置不同的 class，增強其樣式。

• .am-radius?圓角
• .am-round?橢圓
• .am-circle?圓形，一般用于正方形的圖片(你要覺得橢圓好看，用在長方形上也可以)

?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>

邊框

• .am-img-thumbnail?邊框

?Copy ?? <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">

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9011475.html

總結

以上是生活随笔為你收集整理的amazeui学习笔记--css（HTML元素4）--图片image的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。