辨析object-fit 这里边,容易陷入的一个误区在于object-fit 是针对直接容器元素(如果要调整image,那么直接元素对应的容器就是img;) 也就是说,调整图片的时候,是以img元素对应的盒模型的尺寸规格来进行(cover/contain/fill/scale-down/none)操作; 同时,img的父容器并不直接对object-fit产生作用,但是可以有间接作用,...
object-fit(对象拟合) object-fit有5个属性:none、cover、contain、fill、scale-down,它们是用于控制如何调整被替换元素的内容大小的实用程序。 object-fit:none 使用元素的原始大小 以原始大小显示元素的内容,忽略容器大小,使用object-fit:none。 <div>
修复html2canvas生成的图片不支持object-fit的问题,通过换这个库:https://www.npmjs.com/package/@wtto00/html2canvas
同时,img大小设置为百分比(相对于其父容器),如果width/height都设置为100%,那么img盒子的尺寸就是400px500px;(上例中img{}选择器是object-fit能够作用的必要css,当然,如果直接给img一个固定的大小,也可以让object-fit发生作用)