html图片原始比例_html+css 做的新老用户比例示意图

编写样式：

.ratio_box {

width: 300px;

height: 70px;

}

.ratio_box .new {

width: 46%;  /*根据比例控制长度*/

height: 70px;

float: left;

background: url('new_user.svg') repeat;

background-size: 30px 70px; /*svg的图片作为背景图需要设置尺寸*/

}

.ratio_box .old {

width: 54%; /*根据比例控制长度*/

margin-left: 46%; /*根据比例控制左侧外边距*/

height: 70px;

background: url('old_user.svg') repeat;

background-size:  30px 70px;

-moz-transform:scaleX(-1);  /*div水平翻转*/

-webkit-transform:scaleX(-1);

-o-transform:scaleX(-1);

transform:scaleX(-1);    filter:FlipH; /*IE*/

}