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

这里需要用到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 二叉搜索树 实现和学习

    /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * <p> ...

  2. (八) Docker 部署 mongodb

    参考并感谢 官方文档 https://hub.docker.com/_/mongo 下载mongo镜像(不带tag标签则表示下载latest版本) docker pull mongo 启动 mongo ...

  3. 【开发笔记】- Java读取properties文件的五种方式

    原文地址:https://www.cnblogs.com/hafiz/p/5876243.html 一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供j ...

  4. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--实现

    先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...

  5. Oracle 11g 物理存储结构

    Oracle 系统的物理存储结构比较具体和直观,它用来描述 Oracle 数据在磁盘上的物理组成情况.Oracle 系统的数据在逻辑上存储在表空间中,而在物理上存储在表空间所包含的物理文件(即数据文件 ...

  6. Android里的Dalvik、ART、JIT、AOT有什么关系?

    JIT,Just-in-time,即时编译,边运行边编译: AOT,Ahead Of Time,提前编译,指运行前编译. 区别 这两种编译方式的主要区别在于是否在“运行时”进行编译 优劣JIT优点: ...

  7. SuperTab

    Tab快捷键提示功能 下载 http://www.vim.org/scripts/script.php?script_id=1643 安装 # vi supertab.vmb : UseVimball ...

  8. @ConfigurationProperties注解和@Value注解的区别

    都是读取配置文件属性 1.  @ConfigurationProperties(prefix = "person")读取多个属性 @Component @Configuration ...

  9. Linux cat命令使用方法

    今天小编为大家带来cat的使用方法命令:catcat 命令用于连接文件并打印到标准输出设备上.使用权限所有使用者 语法格式cat [-AbeEnstTuv] [–help] [–version] fi ...

  10. LFS7.10——准备Host系统

    转载请标明出处:https://www.cnblogs.com/kelamoyujuzhen/articles/9161515.html 实验环境: Host:Windows10 + WMWare W ...