缩略图如何不挤压拉伸图片

最新推荐文章于 2023-06-14 10:45:37 发布

原创最新推荐文章于 2023-06-14 10:45:37 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

17 篇文章

订阅专栏

　　前端在显示图片缩略图时，如果不清楚图片的尺寸，然后使用固定宽高比的img来显示图片，这样会导致宽高比不一致的图片会被挤压拉伸。

　　处理方式，话不多说，直接上代码(图片请自找)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover" />
    <title>图片缩略图</title>
    <style>
        *{margin: 0; padding: 0;}
        p{font-size: 24px;}
        .way_max,.way_contain{
            display: inline-block; 
            margin-right: 20px;
            border: 1px solid red;
            overflow: hidden;
            font-size: 0;
            width: 200px;
            height: 200px;
            text-align: center;
        }
        .img01{
            max-width: 171px;
        }
        .img02{
            max-width: 100px;
        }
        .way_contain{
            background-image: url("./images/pkq.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 50% 50%;
        }
        .way_cover{
            margin-right: 20px;
            border: 1px solid red;
            overflow: hidden;
            font-size: 0;
            width: 200px;
            height: 200px;
            background-image: url("./images/pkq.png");
            background-size: cover;
        }
    </style>
</head>
<body>
    <p>处理方式：max-width  全图有留白缩略图</p>
    <div class="way_max">
        <img  class="img01" src="./images/pkq.png" />
    </div>
    <div class="way_max"> 
        <img  class="img02" src="./images/pkq.png" />
    </div>
    <p>处理方式： background-size: contain  全图有留白缩略图</p>
    <div class="way_contain"></div>
    <p>处理方式(微信)：way_cover  有裁剪无留白缩略图</p>
    <div class="way_cover"></div>
</body>
</html>

备注：还可以使用 CSS3的object-fit 属性(缺陷：不支持安卓4.4系统 + ios9以下系统)，不需兼容低版本手机时,可以考虑用该属性。