Img与Background-Image区别实例

在ImagePicker组件中,需要实现图片的上传与预览。

  • 容器宽度为屏幕宽度减去margin再除4。
  • 高度等于宽度,保持正方形。

下图所示:

01

如果使用img标签来做,在移动端遇到横拍的图片,会出现下图所示情况,图片不能占满外部容器。

1
<img :src="colitem.url"/>

02

如果使用background-image来做:

1
<div :style="background-image:url(${colitem.url})"></div>

03

浅析

  • background-image会对外部容器做宽高的适配,img只是在容器内把图片读取出来。
  • img是html标签,img去掉css后依然可以完整展示内容;background-image是css方法,需要依靠css样式来修饰。
  • img适合用作不做任何修饰的图片,如广告图,产品列表图;background-image适合做修饰性的背景图,如加了标签,按钮,外部容器的产品列表图。

补充

  • http://www.cnblogs.com/ivy-xu/p/6638459.html
  • https://segmentfault.com/q/1010000003064116