html 如何完美的显示图片，不拉伸图片，完整显示等等。

效果图：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title&gt

草字

12833人浏览 · 2021-11-22 14:18:01

草字 · 2021-11-22 14:18:01 发布

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:100px;
            height:100px;
            border:5px solid #ccc;
        }
        .box{
            width:100px;
            height:100px;
            display: inline-block;
            border:5px solid #ccc;
            background-repeat: no-repeat;
            background-position: center center;
            background-origin: border-box;
            background-size: cover;
        }
        .box2{
            width:100px;
            height:100px;
            display: inline-block;
            border:5px solid #ccc;
            background-repeat: no-repeat;
            background-position: center center;
            background-origin: border-box;
            background-size: contain;
        }
    </style>
</head>
<body>
    <h3>1.使用img标签渲染图片：出现长宽比例被拉伸的情况。</h3>
    <div>
        <img src="./1.jpg" />
        <img src="./2.jpg" />
        <img src="./3.jpg" />
    </div>
    <div>平时后台管理系统偷懒的话，可以使用这种简单的方式输出图片，但是不能保证直接观看图片的质量。</div>
    <h3>2.使用background渲染图片，"background-size:cover"：保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。（推荐）</h3>
    <div>
        <div class="box" style="background-image: url(./1.jpg);"></div>
        <div class="box" style="background-image: url(./2.jpg);"></div>
        <div class="box" style="background-image: url(./3.jpg);"></div>
    </div>
    <div>这种方式一般出现在用户端：头像，商品图片等等，不限制图片上传的大小，也不裁剪图片，为了不影响整体布局的美观，最好采用这种方式来渲染图片。</div>
    <h3>3.使用background渲染图片，"background-size:contain"：保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。</h3>
    <div>
        <div class="box2" style="background-image: url(./1.jpg);"></div>
        <div class="box2" style="background-image: url(./2.jpg);"></div>
        <div class="box2" style="background-image: url(./3.jpg);"></div>
    </div>
    <div>这种方式出现在裁剪图片，或者处理图片的时候，将图片完整的显示出来，以便处理图片。</div>
</body>
</html>