1、img{background-size:contain;}
background-size的contain特定值会保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域。可能会留白
2、img{ background-size:cover; }
background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。超出隐藏
3、缩放和浏览器兼容 transform:scale(2,2.5);
scale(x,y) 对元素进行缩放
- X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
- Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
-webkit-transform:scaleY(.5);
/* Safari
和
Chrome */
-moz-transform:scaleY(.5);
/* Firefox */
-ms-transform:scaleY(.5);
/* Internet Explorer */
-o-transform:scaleY(.5);
/* Opera */
4、旋转 transform:rotate(45deg)
transform:rotate(45deg) 旋转45度
transform:rotate3d(1,1,0,45deg); 如果你要沿着该轴转动那就将该轴的值设置为1,否则为0;然后在后面的angle中设置旋转的角度,