谈一下图片的自适应

最新推荐文章于 2024-06-13 19:04:45 发布

码代码的程序员

最新推荐文章于 2024-06-13 19:04:45 发布

阅读量4.2k

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_41615439/article/details/108991706

版权

css 专栏收录该内容

18 篇文章

订阅专栏

在工作中经常遇到要求图片自适应的需求，下面就谈一下我在工作中经常使用的一些方法

单独使用img标签的情况

单独使用img的时候，可以只设置width就可以了，height不用设置，因为img不设置height，它会自动根据图片的比例设置自适应高度

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgs{
            width:500px;
        }
    </style>
</head>
<body>
<img src="./11-min.jpg" alt="" class="imgs">
</body>
<script>
</script>
</html>

显示效果：

在上面的例子中图片的原本的分辨率是745*438，img标签设置了width：500px而且没有设置height，所以根据自适应的比例height变成了294px(500*(745/438))

2.在div中嵌入img标签

div的样式：按照设计稿设置width,height以及添加position: relative;，例如

    width:400px;
    height: 219px;
    position: relative;

img标签的样式：按照设计稿设置width，以及设置在div居中的样式，例如：

            width: 100%;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .background-div{
            width:400px;
            /*padding:5px;*/
            /*overflow: hidden;*/
            height: 219px;
            position: relative;
        }
        .imgs2{
            width: 100%;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
 <div class="background-div">
     <img src="./11-min.jpg" alt="" class="imgs2">
 </div>
</body>
<script>
</script>
</html>

显示如下：

在上面的例子中图片的原本的分辨率是745*438，img标签设置了width：400px而且没有设置height，所以根据自适应的比例height变成了235px(400*(745/438))

3.使用背景图片(适应不同的屏幕分辨率)

3.1使用rem单位设置height，width以及配合background-size: contain;

例如：

 width: p2r(1920);
 overflow: hidden;
 height: p2r(624);
 background: url("../../../../assets/images/baner6.png") 0 0 no-repeat;
 background-size: contain;

上面的p2r()是一个px转换rem的sass函数,

3.2使用百分比单位设置height，width以及配合background-size: contain;

例如：

 width:38.8%;
 height:45.2%;
 background: url("./11-min.jpg") 0 0 no-repeat;
 background-size: contain;

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
    // border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
        font-size:15px;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    html,body{
            height:100%;
        }

        .background-div{
            width:38.8%;
            height:45.2%;
            background: url("./11-min.jpg") 0 0 no-repeat;
            background-size: contain;
        }

    </style>
</head>
<body>
 <div class="background-div">
 </div>
</body>
<script>
</script>
</html>

上面例子中width以及height的百分比是根据选择一个屏幕分辨率除以图片的分辨率得到的，例如屏幕的分辨率是1920*1080，图片的分辨率745*438，但是在显示区域的高度只有969，所以div的设置成width:38.8%(745/1920),height:45.2%(438/969)

显示如下：