div+background-image和img标签的选择

img标签和div+background-image的选择

前言

  一般情况下，标签和div+background-image都能在块级元素中显示图片，之前就在想，这两种方式有什么区别。通过这两天的实践，逐渐摸清了他们之间的区别以及适用情况，在这篇文章中总结他们的使用要点。

区别

浏览器上下文的区别

  使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文

而使用img显示图片的时候，上下文为img上下文，可以对图片进行另存为等操作。

块大小对图片显示的区别

  下面例子中，img和div的大小为600px*350px， 图片大小为128px*128px
div+background-image的默认样式如下图所示

默认样式有几个注意点

1. 当原始图片比设置的宽高小，会在块中重复显示以铺满块。
2. 当原始图片比设置的宽高大，图片会在块中截断。

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的特性可以得出选择使用这种方法实现显示图片的情况

1. 图片用来当作块的背景的情况，这也是这种方法最原始的用法
2. 由于这种方法的上下文是普通的块级上下文，没有图片另存为等操作，所以可以用于不希望用户能轻易保存图片的情况
3. 可以用于宽高给定的同时不希望图片拉伸且允许图片截断的情况

选择img标签的情况

  img是一个语义化标签，在刚接触html+css的时候肯定有接触到语义化的概念以及渐进增强的概念，虽然现在的前端都不太注重渐进增强，但选用img标签能很好的适应语义化和渐进增强。选用它的情况如下

1. 有明确的语义化要求的情况下选用img标签
2. 图片是页面的组成部分而不是修饰部分的时候选用img标签
3. 显示图片只给定宽或高且不能截断图片并要保证图片宽高比的情况下选用img标签

总结

  这是我最近在做html图片显示方面的总结，可能有一些地方不不正确或这不完善，希望读者能够指出，不吝赐教