怎么让图片不变形

35次阅读

共计 866 个字符，预计需要花费 3 分钟才能阅读完成。

一般我们使用图片都是用 img 标签，正常情况下不会有什么问题。但是如果在宽高都需要限制，客户也没有专门的运营人员或者不按要求上传图片的时候，很可能会出现上图左边的情况。然后客户电话就来了，你们这做的什么鬼，图片都是变形的啊，是不是有一万头羊驼飘过的感觉。在小的外包公司待过的应该懂。。。

这里提供一种处理图片的方式，可以考虑使用背景图片的方式引入图片。利用 background 属性以及 CSS3 新增的 background-size 处理。

  <!-- img 标签的方式使用图片 -->
  <div class="picture-wrap">
    <img class="picture" src="../normal/image/one-piece-luffy.jpg" alt="one-piece-luffy">
  </div>
  <!-- 背景图片的方式使用图片 -->
  <div class="my-picture" style="background-image: url(../normal/image/one-piece-luffy.jpg);"></div>
  <style>
    .picture-wrap {float: left;}

    .picture-wrap .picture {
      display: block;
      width: 300px;
      height: 200px;
    }

    .my-picture {
      float: left;
      width: 300px; /* 可以使用百分比 */
      padding-bottom: 200px; /* 可以使用百分比 */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
  </style>

效果如上图右边所示，效果算不上完美，但至少比图片变形好多了。

可以复制以上代码运行查看使用效果，也可以到 GitHub: https://github.com/Jackyyans/code123 下载，更多示例将会持续更新，欢迎关注。

正文完