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

这里需要用到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. Python2 和 pip2 存在， Python3 也存在，但是 pip3 不存在的解决办法

    sudo curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py sudo python3 get-pip.py 输入两行命令即可

  2. kafka环境安装及简单使用(单机版)

    一个分布式发布-订阅消息传递系统 特点: 高吞吐量.低延迟 使用场景(举例): 日志收集:用kafka收集各种服务产生的log,通过kafka以统一的接口服务的方式开放给各种consumer,如had ...

  3. 编译安装php服务报错问题：configure: error: Cannot find libmysqlclient under /usr.

    在编译安装php服务时报错: checking for MSSQL support via FreeTDS... nochecking for MySQL support... yeschecking ...

  4. 关于在centos下安装python3.7.0以上版本时报错ModuleNotFoundError: No module named '_ctypes'的解决办法

    3.7版本需要一个新的包libffi-devel,安装此包之后再次进行编译安装即可. #yum install libffi-devel -y#make install若在安装前移除了/usr/bin ...

  5. SpringBoot AOP概念及使用Demo

    AOP核心概念1.横切关注点 对哪些方法进行拦截,拦截后怎么处理,这些关注点称之为横切关注点2.切面(aspect)->(通知+切点) 类是对物体特征的抽象,切面就是对横切关注点的抽象.通知+切 ...

  6. 迷你商城后台管理系统————stage3项目部署测试汇总

    系统测试 在项目部署到云服务器之前,已通过本机启动springboot程序,访问localhost:8080,输入登陆的账户等一系列操作测试:功能测试.健壮性测试,系统已满足用户规定的需求. 系统部署 ...

  7. javascript详解1

    推荐学习链接: https://book.apeland.cn/details/356/ http://es6.ruanyifeng.com/#README https://developer.moz ...

  8. PHP-5.6.8 源码包编译安装

    一.下载源码包后,进行解压 [root@www home]# .tar.bz2 gzip: stdin: not in gzip format tar: Error is not recoverabl ...

  9. vs中找到接口和抽象类的具体实现类

    如何找到接口和抽象类的具体实现类 1,可以使用:ctrl+k clrl+t打开调用层次结构窗口: 2,移动到实现节点: 3,然后可以转到具体实现: 第二种安装插件 ReSharper 第三种方法: 在 ...

  10. SpringCloud学习心得—1.3—Eureka与REST API

      SpringCloud学习心得—1.3—Eureka与REST API Eureka的REST API接口 API的基本访问 Eureka REST APIEureka 作为注册中心,其本质是存储 ...