如何让图片像背景一样显示呢？

这里需要用到object-fit属性

MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit的取值：

fill（不保持纵横比缩放图片，使图片完全适应）
contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
none（保持图片宽高不变）
scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）

注意：img图片需要设置宽高，因为上述属性都是和设置的宽高比较菜生效的，一般设置宽高为100%即可。

注意兼容性，一些低版本浏览器不支持

让img图片像背景一样显示的更多相关文章

  1. Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/1873 ...

  2. Camera图片特效处理综述（Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>）

    一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...

  3. 页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大

    图片按比例显示,分为两种情况. 1.空的div内加图片 <div class="emty"><img src="img/my.png"> ...

  4. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

  5. C# 实现PNG文件的背景透明显示，解决动态显示闪烁问题 【转】

    http://blog.sina.com.cn/s/blog_402c071e0102x4rl.html    以下内容,对于想要使用C#实现PNG图片背景透明显示,同时动态显示时无闪烁问题的人来说, ...

  6. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  7. 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  8. ruby on rails爬坑（三）：图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  9. ios-点击图片放大,背景变半透明

    在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下 思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.vie ...

随机推荐

  1. java之hibernate之关联映射之多对一单向关联

    1.在之前学习了单表的crud操作.在实际应用中,大都是多表关联操作,这篇会学习如何处理多表之间的关系. 2.考察书籍表和书籍分类表的关系.书籍表和书籍分类表之间是多对一的关系.数据库的表设计为: 3 ...

  2. 10 查询字符串，X字段必须包含（不包含）XX；_all原理

    指定某个字段,必须要包含XX字符 GET /beauties/my/_search?q=Name:Chang Wei   搜出 某个字段不包含XX字符 的所有内容 GET /beauties/my/_ ...

  3. 网络编程-tcp三次握手和四次挥手

    TCP三次握手和四次挥手过程 1.三次握手 (1)三次握手的详述 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向 ...

  4. 3.建造模式（Builder）

    注:图片来源于 https://www.cnblogs.com/-saligia-/p/10216752.html 建造模式UML图解析: 代码: Director.h // // Created b ...

  5. 记支付宝接口对接，涉及到提取证书SN号的解决方案

    支付宝针对.NET SDK并未封装有提取证书SN序列号的方法,仅针对Java平台才有对应的方法(赤裸裸的歧视啊~~) 要想在提取这个SN序列号有两种方案: 1. 直接用Java SDK包来提取SN 2 ...

  6. hybris commerce storefront的产品搜索功能

    在Hybris Commerce Cloud的storefront的搜索栏键入一些字母,每次键入,会触发一个发送到后台的http请求实现live search的功能: http url如下:https ...

  7. 隐藏Apache版本号及版本敏感信息

    在安装软件前,我们需要隐藏软件的版本号及版本其他信息,这样就大大提高了安全指数. 只隐藏版本号: 我们在主配置文件里:httpd.conf [root@bqh- ~]# curl -i bbs.bqh ...

  8. Java中重载(overloading)和重写(Overriding)的区别

    一:方法的重载 (1)方法重载指在类中定义方法名相同,参数不同的不同的多个方法(返回值类型可随意,不能以返回类型作为重载函数的区分标准). 参数不同表现: 1.参数的个数不同 2.参数的类型不同 3. ...

  9. Python——Int&Bool

    整数类型: int类型,多用于数字运算 print(666) print(6+1) 整数类型转换: v1 = 666 v2 = str(v1) #会得出字符串的666 v1 = True v2 = i ...

  10. Android笔记（五十九）Android总结：四大组件——Service篇

    什么是服务? 服务(service)是Android中实现程序后台运行的解决方案,适用于去执行那些不需要和用户交互并且还需要长期运行的任务.服务的运行不依赖于任何用户界面. 服务运行在主线程中,所以在 ...