object-fit和object-position——img标签实现和背景图一样的显示效果_object-fit使用背景图吗_夜空下的凝视的博客-程序员秘密

技术标签： css  前端  

不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分）


在这里插入图片描述

下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另一张高度大于宽度）
1、背景图显示正方形效果的做法
首先还是从背景图的做法说起，遇到类似的问题，我们大部分人首先想到的是，能用背景图片做的话，就直接用背景图片来做了，至少我是这么想的。那么用背景图的方式是怎么做的，代码还是写一下如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图的做法</title>
    <style>
        .bg-img1 {
            width: 200px;
            height: 200px;
            background: url("images/img1.jpg") center;
            background-size: contain;
        }
        .bg-img2 {
            width: 200px;
            height: 200px;
            background: url("images/img2.jpg") center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景图的做法</h3>
    <div class="bg-img1"></div>
    <br>
    <div class="bg-img2"></div>
</body>
</html>

页面效果如下图：


在这里插入图片描述

当然：背景图还可以实现很多其他效果，只需要background-size属性使用不同的值就可以实现不同的效果，例如：cover，contain，这里就不再一一赘述，因为我们重点要说的是关于img标签显示图片的问题。
2、img标签显示正方形效果的做法
首先、也是需要设置img标签的宽度和高度是一致的，另外需要用到一个关键的css属性——object-fit:cover。下面还是直接贴出代码: 

<meta charset="UTF-8">
<title>img标签的做法</title>
<style>
    .img-1 {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
    .img-2 {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
</style></head><body><h3>img标签的做法</h3><img src="images/img1.jpg" class="img-1"><br><img src="images/img2.jpg" class="img-2"></body></html>

效果如下图：


在这里插入图片描述

至此，已经实现了我们开头说的需求。 3、object-fit的其它值 那么object-fit属性还有哪些值呢？ 　　object-fit: fill; 　　object-fit: contain; 　　object-fit: cover; 　　object-fit: none; 　　object-fit: scale-down;

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

下面我们来测试一下每一个属性值显示的效果，为了更明显的看出区别，我们换另外一张图片。
每个img标签都设置的 width:200px 和 width:200px，再加上设置的object-fit属性的不同值，效果图如下：


在这里插入图片描述

4、object-position属性 object-position要比object-fit单纯的多，就是控制图片在盒子中显示位置的。默认值是50% 50%，也就是居中效果，所以，无论上一节object-fit值为那般，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit。 与background-position类似，object-position的值类型为类型值。也就是说，CSS3的相对坐标设定样式支持的。

注：目前IE应该还不支持object-fit和object-position属性。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38882327/article/details/88911438

智能推荐

麻雀算法_小白VREP的博客-程序员秘密

今天是正月初五，在这里祝大家新年快乐，心想事成。接上次的粒子群算法，这次更新2020年提出的最新的优化算法-麻雀算法。优化问题是科学研究和工程实践领域中的热门问题。智能优化算法大多是受到人类智能、生物群体社会性或自然现象规律的启发，在解空间内进行全局优化。麻雀算法于2020年由薛建凯[1]首次提出，是基于麻雀种群的觅食和反捕食行为的一种新型智能优化算法。麻雀搜索算法的具体步骤描述以及公式介绍：构建麻雀种群：其中，d表示待优化问题的维数，n表示麻雀种群的数量。所有麻雀种群的适应度函数可以表示成如下

从IE到ME，微软依然在浏览器市场坚持，看看都有些什么新功能？_极客行天下的博客-程序员秘密

随着Windows系统的不断升级，我们会发现菜单中的Internet Explorer（IE）不见了，取代它的叫Microsoft Edge（简称ME），图标也从关闭的“e”变成了开放的“e”，大概是在表明自己开放的态度。当然，在很多人的电脑中，这个图标可能就一直静静地躺在那里，未能引起主人的关注。因为大部分人一拿到电脑，就会习惯性地安装上Chrome，而Windows内置的浏览器则被默默地忽略了，比如我就是其中之一。这天，忽然看到桌面上这个由蓝绿渐变色组成的美丽图标，在好奇心的驱使下点开了，不知不觉用了半

内存泄漏检测工具valgrind神器_排查内存泄漏 va_Michaelwubo的博客-程序员秘密

a

Matlab与Google Earth一起自定义M_Map岸线_利用google earth 生成岸线_CHEN_BR的博客-程序员秘密

来源：https://my.oschina.net/u/4579695/blog/4487173https://www.eoas.ubc.ca/~rich/map.htmlhttp://www.ngdc.noaa.gov/mgg/shorelines/data/gshhshttps://ww2.mathworks.cn/matlabcentral/fileexchange/35642-kml2structhttps://ww2.mathworks.cn/matlabcentral/fi.

装修日记_iteye_5500的博客-程序员秘密

Mar 6, 2011从上家手中接过钥匙，这个53.23平米的小房子就正式属于我了。它看起来是那么小那么破啊！[img]http://dl.iteye.com/upload/attachment/430503/3ecf5112-74d0-3011-8902-5e2a78243fc4.png[/img][img]http://dl.iteye.com/upload/attac...

Forge 核心功能介绍（视频 + PPT）| ArcBlock 课堂 ㉔_ArcBlock区块基石的博客-程序员秘密

昨天 5 月 15 日下午 1:00（美国太平洋时间 5 月 14 日 22:00），ArcBlock Technical Learning Series 区块链技术培训系列讲座第24期...

随便推点

习题 7.10 写一个函数，输入一行字符，将此字符串中最长的单词输出。_一梦花海的博客-程序员秘密

###C程序设计（第四版） 谭浩强 习题7.10 个人设计####习题 7.10 写一个函数，输入一行字符，将此字符串中最长的单词输出。#include&amp;lt;stdio.h&amp;gt;int main(){ int word_length = 0, word_max=0; printf(&quot;请输入一个字符串:&quot;); char s[20]; gets(s);...

Anaconda国内镜像源配置_anaconda配置国内镜像源_十梦九有妳的博客-程序员秘密

在使用Anaconda进行一些框架等安装时，如果使用默认的源地址下载很慢，更换到国内的镜像地址就很快，所以这里记录下自己使用的清华镜像配置，方便日后换机操作。

DNSPod十问巩书凯：制造业小工厂上云是个伪需求吗？_DNSPod的博客-程序员秘密

问答时间：2021年8月18日嘉宾简介：巩书凯，重庆忽米网络科技有限公司CEO，任天津市政协委员、天津市红桥区团委副书记、红桥区人大代表、入选创业邦“2017年30位30岁以下创业新贵”榜...

SpringSecurity OAuth2 (7) 自定义 AccessToken 和 RefreshToken (JWT with RSA 签名)_oauth2实现access_token和refresh_token_caplike的博客-程序员秘密

全面的令牌自定义 AuthorizationServerTokenSerivces 的自定义, `TokenStore` 的自定义以及 `OAuth2AccessToken` 的自定义. 启用 JWT (Json Web Token)

文本文件与二进制文件_wuwenming的博客-程序员秘密

<br />一、文本文件与二进制文件的定义<br />    大家都知道计算机的存储在物理上是二进制的，所以文本文件与二进制文件的区别并不是物理上的，而是逻辑上的。这两者只是在编码层次上有差异。<br />    简单来说，文本文件是基于字符编码的文件，常见的编码有ASCII编码，UNICODE编码等等。二进制文件是基于值编码的文件，你可以根据具体应用，指定某个值是什么意思（这样一个过程，可以看作是自定义编码）。<br />    从上面可以看出文本文件基本上是定长编码的(也有非定长

python之tkinter界面编程_tk.booleanvar()_技术爱好者Joker的博客-程序员秘密

Buttonimport tkinterwin = tkinter.Tk()# 设置标题win.title("窗口")# 设置大小和位置win.geometry("400x400+200+50")def func(): print('one')button1 = tkinter.Button(win, text="one", command=func, widt...

推荐文章

热门文章

相关标签