如何实现给一个div盒子加背景图片，并且这个盒子没有宽高，还必须这个图片能够根据视口大小伸缩变化，保持宽高比

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 228 阅读

CC 4.0 BY-SA版权

文章标签：

<template>
  <div class="w-full relative news-bg-img bg-amber-300">
    <div class="w-full absolute bottom-0 left-0 z-10">
      <div>What are you looking for?</div>
    </div>
  </div>
  <div class="space--container">
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.news-bg-img {
  padding-top: calc(650 / 1920 * 100%);//使用这个calc是根据图片的宽高比进行计算得到的
  background-image: url("~/assets/imgs/news-banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>

如果我们使用的是下面的这段代码，那么就不会担心这个div没有宽高,因为只要你设置图片的宽是随着盒子的宽走的，而盒子的宽又是图片的宽撑开的，所以这个盒子的宽高完全是根据自身宽高比进行缩放的，但是如果要你使用的是一张背景图片，并且也要求达到相同的效果，那么你该如何实现呢？这时，就需要使用到上面的那段代码了

<template>
  <div class="w-full relative news-bg-img bg-amber-300">
        <img src=""></img>
  </div>
  <div class="space--container">
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>

</style>

关于第一段代码片的解析实现：

使用padding-top或者padding-bottom 撑开div的高度（这个撑开我们也根据图片的宽高比进行计算）

用background-size:contain/cover让背景图显示（根据实际情况），让div尺寸自动匹配图片尺寸

，然后就可以完美解决，实现跟img标签一样的效果了