移动端图片自适应

来源：互联网发布：重装系统知乎编辑：程序博客网时间：2024/04/29 23:01

/*移动端图片自适应

  精华

*/

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片自适应</title>    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,

user-scalable=0,width=device-width,initial-scale=1.0"/>    <style>        /*移动端图片自适应*/        *{            padding: 0;            margin: 0;        }        .wrap{            position:relative;     /*给个相对定位*/        }        .oImg{            width: 100%;            padding-bottom: 72%;  /* h691/w960 = 0.72* 这个值就是panding-bottom的值/        }        .oImg img {position: absolute;  /*绝对定位*/            top:0;            left:0;            width:100%;}    </style></head><body>      <div class="wrap">          <div class="oImg">              <img src="image/3.jpg">          </div>      </div>      <div>123344</div></body></html>

0 0

移动端 图片自适应

移动端图片自适应