Jerryman_GHJ的博客

HTML渲染过程

【超出一行省略】overflow:hidden; text-overflow:ellipsis;white-space:nowrap;【超出两行省略】overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ...

一、JS方式实现：通过Vue中图片load方法(当然原生JS有对应的img.onload事件)，获取到图片的原始尺寸（img.naturalWidth, img.naturalHeight），然后判断图片是长图还是宽图，如果是长图，则设置图片的宽为100%，高度自适应；反之是宽图，设置图片的高为100%，宽为自适应。当然，如果图片的原始尺寸小于盒子的宽高尺寸，则取图片的原始尺寸。页面：...