关于图
object-fit:
属性指定元素的内容应该如何去适应指定容器的高度与宽度
object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。object-position 属性一般与 object-fit一起使用,用来设置元素的位置。
fill | 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 | 尝试一下 » |
contain | 保持原有尺寸比例。内容被缩放。 | 尝试一下 » |
cover | 保持原有尺寸比例。但部分内容可能被剪切。 | 尝试一下 » |
none | 保留原有元素内容的长度和宽度,也就是说内容不会被重置。 | 尝试一下 » |
scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。 | 尝试一下 » |
initial | 设置为默认值,关于 initial | |
inherit | 从该元素的父元素继承属性。 关于 inherit |
图片文字居中:vertical-align:middle;
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | 将元素升高或降低指定的高度,可以是负数。 |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |