img ，background-img，background-size

何时用img，何时用背景图

使用img
作为html结构内容的一部分
展示从后台传过来的数据对图片进行缩放操作
利于搜索引擎搜索时
有明确的语义化要求图片作为页面的组成部分而不是修饰部分
显示图片只给定宽或高且不能截断图片，并且保证图片宽高比
使用背景图
不是html结构的一部分
图像代替文本使用时
缩短下载时间时
为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)
作为背景图片
禁止用户保存图片(点击鼠标右键另存为操作)
允许图片拉伸，平铺，截取等情况

img，background-img

img

img标签虽然不是块状元素，但是可以设置宽高，占位，
img设置width后height会自适应匹配，如果设置height后width会自适应匹配,如果同时设置width，height，img图片可能会变形
background-image
它是css的一个样式，并不占位，可以结合background-size,background-repeat,background-position等属性来设置图片位置，大小等。
它所在的元素必须指定height，否则背景图片显示不出来，可以不指定width，如果不指定width，它的宽度则继承父元素的宽度

俩者的区别：

img是html标签，占位，background-image是CSS样式，不占位；
img是document对象可以操作(比如：从document对象中删除)，background-image是不能操作的；
背景图片会等到html结构加载完成才开始加载；
img标签是网页结构的一部分，会在html结构加载的时候加载；
背景图片在加载失败或路径找不到时，不会显示图片标记；
img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记

 background-size:100% 100%;按容器 比例撑满，图片会变形background-size:cover;把背景图片放大到适合元素容器的尺寸，图片比例不变

数据图与非数据图

所谓数据图就是从后台获取的图片，一般就用img标签显示，其他的图片一般就作为背景图展示

img ，background-img，background-size相关推荐

数组实现栈，实现push，pop，size方法 -- 面试算法
思考: 有几个关键的地方, 第一,数组的话,如果我们一直push,需要扩容. 第二,因为产生了扩容所以当前数组的大小,不代表存放的数据多少,所以我们需要一个count 表示当前的容量. 第三,扩容之后 ...
SIZE，POINT，CPoint, CRect，CSize浅谈
这几个结构容易混淆: SIZE:The SIZE structure specifies the width and height of a rectangle. typedef struct tag ...
为Linux编译atheros ar1111（设备ID：168c:0037，AW-NB100H – AR5B225 Atheros half size)网卡驱动...
买了个zotac h61itx-a-e wifi主板,从zotac官网下载的Linux驱动编译不过去,无奈自己做了个compat-wireless-3.5-rc5-1的补丁,实际上ath9k已经支持这 ...
multimap学习之创建，初始化，赋值操作operator=, empty,size,max_size
multimap 是关联容器,含有键值对的已排序列表,其功能与map一样,唯一不同的是,它容许多个元素拥有同一键.本篇学习map的创建,初始化,赋值操作operator=, empty,size,ma ...
解决：win10 休眠项消失，无法使用休眠 powercfg /h /size 50 连到系统上的设备没有发挥作用
为什么用这个休眠的功能?因为重启的话,还要打开那么多应用程序! 重复的操作,能不要就不要.因为浪费时间呀!时间就是生命有木有! 情景再现: 之前一直使用win10的休眠感觉还是挺好用的,晚上直接按 ...
multiset学习之创建，初始化，赋值操作operator=, empty,size
本篇开始学习multiset,与set相比,multiset可以有多个相关的关键字,其它也set的功能一样,下面我们先来学习它的创建,初始化,赋值操作operator=, empty,size等相关操 ...
set学习之创建，初始化，赋值操作operator=, empty,size
set 是关联容器,含有 Key 类型对象的已排序集.用比较函数比较 (Compare) 进行排序.搜索.移除和插入拥有对数复杂度. set 通常以红黑树实现.本篇学习set的创建及初始化. 示例代 ...
Vscode下jupyter无法显示plot画图，并显示＜Figure size 640x480 with 1 Axes＞问题解决
今天被这个问题坑惨了,看了网上十几篇文章,都是说在输出图像前的代码处加上%matplotlib inline(大家也可以尝试下).我在不同的位置试了n遍都没用,所以气得我直接卸载了python环境并重 ...
微信朋友圈，QQ空间，微博等列表展示的功能实现
内容摘要该控件能够应用于内容资讯展示的功能模块中,如:腾讯和新浪微博的微博列表,微信朋友圈及其它社交类应用的好友动态展示列表等:实现了类似腾讯微博的微博列表展示功能,包含微博文本内容,表情,图片,话 ...
自定义View：测量measure，布局layout，绘制draw
1. 什么是View 在Android的官方文档中是这样描述的:表示了用户界面的基本构建模块.一个View占用了屏幕上的一个矩形区域并且负责界面绘制和事件处理. 手机屏幕上所有看得见摸得着的都是Vie ...

img ，background-img，background-size

img ，background-img，background-size相关推荐

最新文章

热门文章