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

这里需要用到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. oracle 查询 10题

    说明:表数据来自oracle 初始用户之一scott里面的三个初始表:emp,dept,salgrade --1.查询员工表中工资最高的雇员的员工号.员工姓名.工资和部门号. select empno ...

  2. Java 解决Emoji表情过滤问题（转载）

    本文作者 我是周洲 原文链接 https://blog.csdn.net/u012904383/article/details/79376707 本人使用的是第三种引入jar的方法 问题: Emoji ...

  3. Linux 内核/驱动开发总结

    总体来看,需要一个阶段性总结了,因为现在SD卡的调试也进入了卡壳期.大概会出一系列的总结文章,主要涉及的主题在下面列出: 1.开发工具:gcc/gdb/vim/ctags 2.Makefile和KCo ...

  4. JDBC中PreparedStatement相比Statement的好处

    Statement对象: 用于执行不带参数的简单SQL语句: 特点: a. 只执行单条的sql语句: b. 只能执行不带参数的sql语句: c.运行原理的角度,数据库接收到sql语句后需要对该条sql ...

  5. TCP_Wrappers基础知识介绍

    1． TCP_Wrappers基础知识介绍 TCP_Wrappers是在 Solaris, HP_UX以及 Linux中广泛流行的免费软件.它被设计为一个介于外来服务请求和系统服务回应的中间处理软件. ...

  6. MySQL Hardware--RAID卡常用信息查看

    MegaRAID信息查看 #查raid卡信息(生产商.电池信息及所支持的raid级别) /usr/local/sbin/MegaCli -AdpAllInfo -aALL |grep -E " ...

  7. python（if判断）

    一.if判断 如果 条件满足,才能做某件事情, 如果 条件不满足,就做另外一件事情,或者什么也不做 注意: 代码的缩进为一个 tab 键,或者 4 个空格 在 Python 开发中,Tab 和空格不要 ...

  8. 批量导入数据到InnoDB表速度优化

    1.使用Load data: 2. SET autocommit=0; ... SQL import statements ... COMMIT; 3. SET unique_checks=0; .. ...

  9. xadmin 配置内置User模型

    xadmin 配置内置USER模型 默认展示 在你的User模型对应的app下创建adminx 文件 import xadmin from django.contrib.auth import get ...

  10. sqoop 导入增量数据到hive

    版本 hive:apache-hive-2.1.0 sqoop:sqoop-1.4.6 hadoop:hadoop-2.7.3 导入方式 1.append方式 2.lastmodified方式,必须要 ...