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

这里需要用到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. Bad state: Stream has already been listened to.

    https://stackoverflow.com/questions/51396769/flutter-bad-state-stream-has-already-been-listened-to T ...

  2. Delphi-RzDbgrid-绘制表格式设置某行颜色或者其他格式-以及隔行换色的属性

    参考文章:https://www.cnblogs.com/OSKnown/p/8568740.html 在DbgridEh和原生的Dbgrid直接在DrawColumnCell事件中写重绘代码就好了, ...

  3. DBUtils模块

    Python 中的数据库连接池 DBUtils是Python的一个用于实现数据库连接池的模块. 有两种模式 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不会关闭,只是把连接重新放到 ...

  4. 一：MySQL系列之基本介绍（一）

    本篇主要介绍关于MySQL数据的基本知识,包括数据存储的变化,什么是MySQL以及其有什么优点.以及什么是RDBMS概念性知识等,以及关于MySQL语句的SOL的基本用法: 一.数据库 数据库,顾名思 ...

  5. Linux 进程IO杂项

    Linux 进程IO杂项 本文结合一个 pwn 例题,在分析例题的过程中穿插介绍相关知识. 例题来源:PWNABLE.KR 网站,Toddler's Bottle 小节,习题 input. 例题内容: ...

  6. SVN提交错误及使用技巧

    错误1: Some of selected resources were not added to version control. Some of selected resources were n ...

  7. [堆栈]Linux 中的各种栈：进程栈 线程栈 内核栈 中断栈

    转自:https://blog.csdn.net/yangkuanqaz85988/article/details/52403726 问题1:不同线程/进程拥有着不同的栈,那系统所有的中断用的是同一个 ...

  8. mysql：[Err] 1068 - Multiple primary key defined

    添加主键时,出现错误:[Err] 1068 - Multiple primary key defined #增加主键 ) not null; ; alter table my_test add pri ...

  9. visual studio故障修复

    如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.

  10. node-images 进行图片压缩

    前置条件:先安装images npm install images 编写代码 思路: 从指定文件夹遍历图片,执行压缩,压缩完成后放到指定文件夹中,并保持图片名无变化. var images = req ...