div+background-image和img标签的选择
2017-10-17 18:52
393 查看
img标签和div+background-image的选择
前言
一般情况下,标签和div+background-image都能在块级元素中显示图片,之前就在想,这两种方式有什么区别。通过这两天的实践,逐渐摸清了他们之间的区别以及适用情况,在这篇文章中总结他们的使用要点。区别
浏览器上下文的区别
使用div+background-image实现图片显示的时候,该块级元素的上下文为普通的块级上下文而使用img显示图片的时候,上下文为img上下文,可以对图片进行另存为等操作。
块大小对图片显示的区别
下面例子中,img和div的大小为600px*350px, 图片大小为128px*128pxdiv+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图片显示方面的总结,可能有一些地方不不正确或这不完善,希望读者能够指出,不吝赐教相关文章推荐
- 该如何选择 background-image 和 img 标签
- 何时使用img标签,何时使用background-image背景图像
- HtmlNinja-用img标签还是background-image?
- img标签src=""和background-image:url();引发两次请求页面bug
- 何时使用img标签,何时使用background-image背景图像
- 何时使用img标签,何时使用background-image背景图像
- 何时使用img标签,何时使用background-image背景图像
- 何时使用img标签,何时使用background-image背景图像
- img 和 background-image的选择
- js实现的修改div里img标签的src属性
- css3实现一个div设置多张背景图片及background-image属性
- 利用<div>层 和<img>标签,实现一个图片两个动画效果
- Jsoup 标签选择器 选择img标签中src的值
- 通过js获取div的background-image属性
- [html5入门-8]浅析img与background-image使用技巧
- 【转】 img标签 在IE6和IE7中导致父层DIV高度多了4px
- 解决 div或者a标签的高度比里面的img高度高问题
- 10033---div--background-image的路径问题
- 解决 div或者a标签的高度比里面的img高度多了5px 问题
- img标签下多余空白BUG解决方法 / div / img / 图片 / 空格