vue中用img做背景图片，并做到自适应

原创于 2019-11-22 11:40:35 发布 · 1w 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #img #背景 #自适应

在制作App页面过程中，作者独立解决了img元素未能完全覆盖其父元素的问题。关键在于将div元素的宽高设为100%，确保img能够正确填充整个背景区域。

在学习慕课网-饿了么视频课程以后，自己独立制作app页面的过程中遇到一个小坑，记录下来。

解决方法：
js代码：

<div class="header-background">
	<img :src="headerSeller.avatar" width="100%" height="100%" />
</div>`

css代码：

.header-background
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index -1

自己出错的地方在于：没有把 div的width和height设置成100%。导致img的无法覆盖整个父元素。找问题原因的时候，又去查 backgound-image，哎。分享一下，给新手们节约一点时间吧。