div+background-image和img标签的选择
来源:互联网 发布:linux设置用户密码 编辑:程序博客网 时间:2024/05/21 17:41
img标签和div+background-image的选择
前言
一般情况下,标签和div+background-image都能在块级元素中显示图片,之前就在想,这两种方式有什么区别。通过这两天的实践,逐渐摸清了他们之间的区别以及适用情况,在这篇文章中总结他们的使用要点。
区别
浏览器上下文的区别
使用div+background-image实现图片显示的时候,该块级元素的上下文为普通的块级上下文
而使用img显示图片的时候,上下文为img上下文,可以对图片进行另存为等操作。
块大小对图片显示的区别
下面例子中,img和div的大小为600px*350px, 图片大小为128px*128px
div+background-image的默认样式如下图所示
默认样式有几个注意点
- 当原始图片比设置的宽高小,会在块中重复显示以铺满块。
- 当原始图片比设置的宽高大,图片会在块中截断。
div+background-image可以通过backgroung-size
, background-rpest
, background-position
, background-origin
, background-clip
等CSS样式来调整显示的样式,当然也可以调整为和img的默认样式一样
div{ background-size: 600px 350px;}
div+background-image通过几种样式的组合可以调整出各种各样的显示效果,
使用img标签显示图片的话,图片实际显示的宽高就是设定的宽高,没有别的办法来设定显示的样式,可以看出一旦设定的宽高比和原来图片的宽高比不一致,显示出的图片就会有拉伸的现象。
但当你只设置宽或只设置高,高或者宽就会按照原来的宽高比自动设置。
选择
选择div+background-image的情况
根据div+background-image的特性可以得出选择使用这种方法实现显示图片的情况
- 图片用来当作块的背景的情况,这也是这种方法最原始的用法
- 由于这种方法的上下文是普通的块级上下文,没有图片另存为等操作,所以可以用于不希望用户能轻易保存图片的情况
- 可以用于宽高给定的同时不希望图片拉伸且允许图片截断的情况
选择img标签的情况
img是一个语义化标签,在刚接触html+css的时候肯定有接触到语义化的概念以及渐进增强的概念,虽然现在的前端都不太注重渐进增强,但选用img标签能很好的适应语义化和渐进增强。选用它的情况如下
- 有明确的语义化要求的情况下选用img标签
- 图片是页面的组成部分而不是修饰部分的时候选用img标签
- 显示图片只给定宽或高且不能截断图片并要保证图片宽高比的情况下选用img标签
总结
这是我最近在做html图片显示方面的总结,可能有一些地方不不正确或这不完善,希望读者能够指出,不吝赐教
- div+background-image和img标签的选择
- img 和 background-image的选择
- 该如何选择 background-image 和 img 标签
- background-image 和 img
- 论background-image和img的区别
- img和background-image的各种区别
- background-image和<img/>的区别
- background-image和img的区别
- 何时使用img标签,何时使用background-image背景图像
- 何时使用img标签,何时使用background-image背景图像
- 何时使用img标签,何时使用background-image背景图像
- 前端HTML<img>标签图像的属性和使用/图像img与背景background的区别
- img和background的区别
- Asp.net img标签和image控件的区别
- 获取div的background-image属性
- 10033---div--background-image的路径问题
- div和img标签之间存在空的解决办法
- 标签设置background-image
- 安卓抓包工具charles安装使用
- 事务的隔离级别
- DateUtils.parseDate的缺陷
- Django知识点汇总
- 第十三天 PHP运算符
- div+background-image和img标签的选择
- spring的BeanFactory和ApplicationContext的区别
- python爬虫--连接MongoDB 存数据
- Repository does not allow updating assets 解决方法
- Android常用的依赖和权限
- 在OpenCV3.1.0中使用SIFT,SURF算法
- 精简Miui9
- Jenkins 自动构建之日程表配置
- SSL协议详解