img标签关于填充方式的属性_img contain

img属性object-fit

属性值：object-fit: fill / contain / cover / none / scale-down;

1. fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

2. contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。

3. cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。

4. none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

5. scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

例子：

    <img src="aaaa.png" alt="" style="object-fit: fill;">

1
2

6.图片与文字的对齐方式：
vertical-align:middle; /*sub 垂直对齐文本的下标 | super 垂直对齐文本的上标 | text-top 把元素的顶端与父元素字体的顶端对齐 | text-bottom 把元素的底端与父元素字体的底端对齐 | middle 把此元素放置在父元素的中部 | top 把元素的顶端与行中最高元素的顶端对齐| bottom 使元素及其后代元素的底部与整行的底部对齐 */
length 将元素升高或降低指定的高度，可以是负数。
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。