移动端图片自适应

最新推荐文章于 2023-05-29 16:58:24 发布

Knight7890

最新推荐文章于 2023-05-29 16:58:24 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5(移动端) 文章标签： html5 移动端图片自适应

本文链接：https://blog.youkuaiyun.com/Knight7890/article/details/51720324

html5(移动端) 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一种移动端图片自适应的实现方法，通过HTML5的meta标签和CSS样式，确保图片在不同设备上都能完美展示。在<head>部分设置了viewport元标签，保证页面宽度适应设备宽度。在CSS中，使用相对定位和绝对定位结合百分比宽度及padding-bottom属性，实现了图片比例自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*移动端图片自适应

  精华

*/

<!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>