为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

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

1 回答

?
慕尼黑5688855

TA贡献1848条经验 获得超2个赞

我之前的项目中有遇到相同的问题,我的建议如下:

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';

    }

    ...

  }


查看完整回答
反对 回复 2019-01-08
  • 1 回答
  • 0 关注
  • 648 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信