首页
学习
活动
专区
圈层
工具
发布

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果...2、img标签显示正方形效果的做法 首先、也是需要设置img标签的宽度和高度是一致的,另外需要用到一个关键的css属性——object-fit:cover。下面还是直接贴出代码: <!...: cover; } img标签的做法 object-fit: fill;   object-fit: contain;   object-fit: cover;   object-fit: none;   object-fit: scale-down...每个img标签都设置的 width:200px 和 width:200px,再加上设置的object-fit属性的不同值,效果图如下: ?

3.2K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    零基础学习HTML(10)——striong标签、b标签、em标签、i标签、del标签、ins标签、s标签、u标签、mark标签、sup标签、sub标签、samll标签

    标签:https://man.ilovefishc.com/pageHTML5/em.html i标签:https://man.ilovefishc.com/pageHTML5/i.html del...标签:https://man.ilovefishc.com/pageHTML5/del.html ins标签:https://man.ilovefishc.com/pageHTML5/ins.html...标签:https://man.ilovefishc.com/pageHTML5/mark.html sup标签:https://man.ilovefishc.com/pageHTML5/sup.html...--del标签用于定义文已被删除的文本,ins标签用于定义新插入的文本--> 我喜欢三上悠亚,不,我只是单纯的喜欢搞黄色。...--s标签用来定义那些不正确的文本,不能和del标签混用--> 我喜欢三上悠亚,不,我只是单纯的喜欢搞黄色。 <!

    7410

    谈谈{}跟Object以及object的区别

    在TS中,相信很多人搞不清Object,object以及{}之间的关系,或者没有深究过,觉得他们只是同一个类型的不同别名,其实不然,每一个的存在都是有原因的。今天我们一起来探究他们的不同之处。...Object 类似于{},所有拥有Object原型的值都能赋给Object作为类型的变量。 image.png 但是有一丢丢规则,值的原型里得有Object(当然了,JS的大部分值都是有的)。...Object1.png 它所指向的对象一无所知,访问任何属性或者方法都会报找不到: image.png 需要注意,Object对于对象里的某些方法是有要求的(比如Object原型对象的toString方法...这种行为有时候让人迷惑,所以二者选其一,我选{}, object 然后就是object类型了。 object跟{}有一点不同,它不包含原始类型。...如果这时候我们把类型参数换成object,问题就迎刃而解了。

    72010

    【HTML】HTML 标签 ② ( 排版标签 | 标题标签 | 段落标签 | 水平线标签 | 换行标签 | div 标签 | span 标签 )

    文章目录 一、排版标签 1、标题标签 2、段落标签 3、水平线标签 4、换行标签 5、div 标签 和 span 标签 HTML 常用的标签有如下类型 : 排版标签 文本格式化标签 图像标签 链接标签..., 其中 链接涉及到 相对路径 与 绝对路径问题 ; 一、排版标签 ---- 排版标签 是 网页布局 中 , 最常用的标签 , 排版标签又分为如下几个类型 : 标题标签 段落标签 水平线标签 换行标签...div 标签 span 标签 1、标题标签 HTML 提供了 6 个等级的标题 , 分别是 一级标题 二级标题 三级标题...水平线标签 , 可以在网页中添加一条分割横线 , 标签代码如下 : 在标题下添加了 标签后的效果 , 在网页中 , 显示了一条横线 ; 4、换行标签 换行标签 : 标签 div 标签 和 span 标签 都用于 网页布局 ; div 标签 一行 只能设置一个 ; 布局内容 span 标签 一行可以设置多个 ;

    13.5K30

    JavaWeb——HTML基本标签详解及案例实战(文件标签、文本标签、图片标签、列表标签、链接标签、块标签、语义化标签、表格标签)

    上一节介绍了HTML的基本概念,和基本语法,本节介绍下HTML的基本标签和表单标签。这部分学习可以参照W3Cschool,一个很好的网站。...1、文件标签 文件标签是构成HTML最基本的标签,包括: html:html文档 的根标签 head:头标签,用于指定html文档的一些属性,引入外部的资源 title:标题标签 body:体标签 :html5中定义该文档是html文档 2、文本标签 文本标签是和文本相关的标签,包括: 注释: 换行标签,自闭和标签 标题标签,字体大小逐渐递减,自带换行效果 段落标签 显示一条水平线,可以修改属性(color、width、size...6、块标签 次此处简单介绍div和span标签,后续一般配合css使用。 【举例】:div 和 span 标签 <!

    5K11
    领券