在对图片根据一定的规则进行宽高的设置

Question

1.有这样一个问题 因为用户上传的图片大小是不确定的 但是可显示的范围是300*60px;所以对其图片进行设置 如果宽大于300px 让其显示最大 高自适应 如果高大于60px; 高显示60px; 宽自适应。因为这种都是在图片加载完成后进行判断的 总是会感觉页面有抖动。 有什么解决方法吗？

Answer 1

我之前的项目中有遇到相同的问题，我的建议如下：
1、给你的img设置样式max-width:300px;max-height:60px;父容器宽高固定，如下

<div style="position:relative;width: 300px;height: 60px;">
  <img src="xxx" alt="" style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);max-width: 300px;max-height: 60px;">
</div>

这样设置后，不会出现抖动，比较简单；但是有个问题：即用户上传的图片尺寸小于这个范围的话，图片并不能放大铺满这个范围

2、先用默认图片代替或先隐藏，等图片加载完，根据图片的具体尺寸设置样式后再替换或者显示

var img = new Image().src='xxx';
img.onload = function() {
    var suit = 'width',
        w = img.width,
        h = img.height;
    if (w/h < 300/60) {
      suit = 'height';
    }
    ...
  }

Answer 2

现在随便找一个 CDN 服务，都有 size 类的功能，请求时带上尺寸信息就好了。

Answer 3

给图片的block加上scroll auto试试

Answer 4

1，这种需求场景抖动不能避免啊

无图片->有图片，是会抖动的。
图片加载出来->resize 再抖动一次。

2，不是必须在图片加载完成后才能处理

也就是说，第二次抖动是可以避免的。

图片加载是边加载变解析，而图片尺寸数据是在头部的，所以处理足够快的话，在图片显示到页面之前就可以知道尺寸，此时，在显示前给图片设置尺寸就可以了。

也可以简单处理，所有图片都默认隐藏，加载完成并修改尺寸后再显示。显示时可以加个动画，将高度慢慢撑起来，可以看起来不那么抖。