辨析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> <img style="width:300px;height:250px;object-fit:none">...
例如:object-fit: cover; //img 图片适配 img{ object-fit: cover; } object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 语法 object-fit 属性由下列的值中的单独一个关键字来指定。
同时,img大小设置为百分比(相对于其父容器),如果width/height都设置为100%,那么img盒子的尺寸就是400px500px;(上例中img{}选择器是object-fit能够作用的必要css,当然,如果直接给img一个固定的大小,也可以让object-fit发生作用)