vue 手机端背景图片变形问题解决

最新推荐文章于 2023-01-31 15:32:15 发布

性野喜悲

最新推荐文章于 2023-01-31 15:32:15 发布

阅读量603

点赞数

分类专栏： vue html+css 经验分享文章标签：前端 css html

本文链接：https://blog.csdn.net/leng0920/article/details/127652261

版权

经验分享同时被 3 个专栏收录

146 篇文章 1 订阅

订阅专栏

vue

133 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

变形的图：

html:

<div class="lamp-img-panel" ></div>

css:

  .lamp-img-panel {
    width: 100%;
    height: 40vh;//高度40vh相当于占整个屏幕高度的40%
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_h5/fbecGame/home_bg2.png')
      no-repeat center center;
    background-size: 100% 100%;
  }

修改后的效果：

html：

<div class="lamp-img-panel" :style="{'height': `${logoHeight}px`}"></div>

css:

  .lamp-img-panel {
    width: 100%;
    // height: 40vh;//高度改为动态高度，写在行内
    background: url('https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_h5/fbecGame/home_bg2.png')
      no-repeat center center;
    background-size: 100% 100%;
  }

js:

<script>
export default {  
data() {
    return {
      logoHeight: window.innerWidth * (1304 / 1500),//1304为图片本身的高度，1500为图片本身的宽度
    };
  },
};
</script>