通过img加载图片，当图片缩放时失真

图片压缩处理网站

1、网站1
2、网站2

一、问题产生场景

在windows电脑下，通过img标签展示图片，当图片展示宽高和图片本身不一致，但宽高比不变，此时图片发生失真。

二、解决方案

在网上看了很多方案基本上使用的是

  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

在windows电脑上不起作用，且不是稳定版的属性，不建议使用

解决方案1

//给图片设置css样式
width: 100%;
height:auto;
image-rendering: pixelated;

解决方案2

//在css中设置(不要设置height)
width: 100%;
object-fit: none;
 visibility: hidden;

 //在mounted中
this.$nextTick((res) => {
   let img = this.$refs.img;
   this.timer= setTimeout(() => {
       img.style.objectFit = 'scale-down';
      //当图片的objectFit 发生变化时，图片的显示会出现闪现的抖动
       img.style.visibility = 'visible';
    }, 100);
});

//beforeDestroy
beforeDestroy() {
   //页面关闭时清除定时器
   clearInterval(this.timer);
},

对比效果如下

对比效果.png

解决方案3

使用svg图片
优点：缩放都不会失真
缺点：1、svg本身渲染效率不高 2、当图片里有文字，但系统又没有安装相应的字体，图片本身的显示会有问题。

解决方案4

展示区域大大小和图片本身的大小一致
优点：不会失真
缺点：在多倍屏下，不够清晰

三、滑动条占宽度影响页面布局的解决方案(el-scrollbar)

 <div class="parent scroll">
     <el-scrollbar> 
         <div class="child"></div>
     </el-scrollbar> 
 </div>
//更改滑动条的样式
.scroll{
  &::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 3px solid transparent;
    box-shadow: 6px 6px 0 0 rgba(38, 46, 62, 0.1)  inset;
    &:hover {
      box-shadow: 6px 6px 0 0 rgba(38, 46, 62, 0.2) inset;
    }
    &:active {
      box-shadow: 6px 6px 0 0 rgba(38, 46, 62, 0.3) inset;
    }
  }
}