预览图固定宽高显示不失真显示缩略图（长图也可以用）img，background都适用

预览缩略图

html

<body>
  <style>
    div {
      width: 160px;
      height: 160px;
      display: flex;
      justify-content: center;
      background: pink;
      /* 居中 */
    }

    img {
      /* 核心是max- */
      max-width: 160px;
      max-height: 160px;
    }
  </style>
  <div>
    <!-- 1008*2337尺寸 -->
    <img src="./src/assets/长图.jpg" alt="">
  </div>
</body>

原图文件

上面说的是img标签类型的宽高缩略图 还有一种是针对背景图的属性 

当宽高都固定 想让背景图不失真 只是缩放 还可以用 background-size

 

posted @ 2021-08-28 11:03  xuanPhoto  阅读(199)  评论(0)    收藏  举报