img属性object-fit

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

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。
cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
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 属性的值。

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

CSS3 多列布局列的填充方式column-fill属性
在多列容器中,如果显式设置了容器的高度,往往会由于内容不足,而导致最后面的列没有内容填充,就会出现各列高度不一致的情况. 这种情况下,就可以通过 column-fill属性来控制各列内容的填充方式,可 ...
在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证
在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证具体场景为:某一属性是否允许为null的验证,要根据另 ...
python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
python编译成class_django为Form生成的label标签添加class方式
使用Form生成html标签的时候,虽然提供了widget的方法可以自定义标签的要是,但是只能给生成的input标签添加样式,对于生成的label标签无法添加样式. 而很多场景下需要为label和in ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
Spring——Bean管理-xml方式进行属性注入
目录一.xml方式创建对象二.xml方式注入属性第①种方式注入:set方法注入第②种方式注入:有参构造函数注入 constructor-arg:通过构造函数注入用name标签属性: 不按照顺 ...
在html语言中段落标签是,HTML的段落标签是什么？段落标签具体都有哪些属性？...
HTML现在已经是非常的火了,网页的的任何事情都离不开HTML,所以学号HTML很重要,本文就给大家说说HTML中的段落标签是什么和段落标签具体都有哪些属性 HTML的段落标签是什么: HTML的段落 ...
Web基础 HTML标签六种超链接标签的使用方式
超链接标签(重点) 1.链接的语法格式: <a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a> ...

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

img属性object-fit

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

最新文章

热门文章