- N +

css控制图片宽高比例一致

文章目录 [+]

第一种

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div,img,div{margin:0;padding:0;}

       .imgg{position: relative;padding-top: 100%;background-color: red;}

       img{position: absolute;left:0;top:0px;width:100%;height:100%;}

</style>

</head>

<body>

<div style="width:700px;border:1px solid #000">

<div>

<img src="2.jpg" alt="">

</div>

</div>

</body>

</html>

第二种

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div style="position: relative;width:400px;">

<div style="padding-top: 100%;border:1px solid #000"> </div>

          <span style="display: block;background:url(2.jpg);position: absolute;top:0px;left:0px;width:100%;height: 100%"></span>

</div>

</body>

</html>


作者:huchao
未来永远在它该来的路上,能够把握的只是此时此刻——万折必东
返回列表
上一篇:
下一篇:
评论列表 (暂无评论,共504人参与)参与讨论

还没有评论,来说两句吧...

发表评论中国互联网举报中心

快捷回复: