css怎么实现图片在页面上以相同等比例显示缩放？

　　css图片等比例显示具体代码示例如下：

　　<!DOCTYPEHTML>

　　<htmllang="en">

　　<head>

　　<title>css图片等比例显示代码示例</title>

　　<metacharset="UTF-8">

　　<styletype="text/css">

　　.demo1-1{

　　float:left;

　　width:200px;

　　height:200px;

　　overflow:hidden;

　　}

　　.zoomImage{

　　width:100%;

　　height:0;

　　padding-top:100%;

　　overflow:hidden;

　　background-position:centercenter;

　　background-repeat:no-repeat;

　　background-size:cover;

　　-webkit-background-size:cover;

　　-moz-background-size:cover;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="demo1-1">

　　<divclass="zoomImage"style="background-image:url(2.png)"></div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56831.shtml