amazeui学习笔记--css(HTML元素4)--图片image
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
中。
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。

<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
圆形,一般用于正方形的图片(你要觉得椭圆好看,用在长方形上也可以)
<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
边框



<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">
amazeui学习笔记--css(HTML元素4)--图片image的更多相关文章
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
随机推荐
- Android学习总结(2)——App客户端与服务器交互中的token
学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...
- iOS 开发之IPad的设计与实现
// // main.m // 6-ipad // #import <Foundation/Foundation.h> #import "Ipad.h" int mai ...
- 什么是PV和UV?
技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...
- 在vim中配置python补全,fedora 19
近期发现python是个不错的语言,值得一学,先配置下环境,让vim具有keyword补全功能,步骤例如以下,我这个是fedora,其它发行版类似 $ su ******** # yum instal ...
- OcadeToolkit - From 2D CAD to PDMS
OcadeToolkit - From 2D CAD to PDMS eryar@163.com Abstract. 基于开源二维CAD软件QCAD开发的插件可以将DXF文件中直线.圆弧转换到PDMS ...
- AVEVA PDMS 三维文字工具
AVEVA PDMS 三维文字工具 eryar@163.com 网上有个文字工具插件,可以在PDMS中创建三维的字母和数字,且字体样式只有一种,其下载地址为:http://www.plantcon.d ...
- amaze ui使用简介
amaze ui使用简介 amaze UI 类似于bootstrap 不过比bootstrap更加轻量级 可以用来开发响应式网站,并且是移动优先的,针对移动设备开发的网站可以考虑使用这个框架 css中 ...
- 71.用express框架,出现 express.Router is not a function
Express版本太久
- SpringMVC-@RequestMapping的参数和用法
RequestMapping里面的注解包含的参数如图: RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. ...
- hostname---显示和设置系统的主机
hostname命令用于显示和设置系统的主机名称.环境变量HOSTNAME也保存了当前的主机名.在使用hostname命令设置主机名后,系统并不会永久保存新的主机名,重新启动机器之后还是原来的主机名. ...