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

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;">

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

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值