欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

h5 - vue项目中 如何让图片自适应各种屏幕的宽度,宽高比固定

如上图,图片上传固定比例的照片,图片宽度100%。高度随着屏幕宽度的变化自适应。

1.先定义一个计算的方法,comouted中定义:

  computed: {
    ad_height() {
      let screen_width = document.documentElement.clientWidth
      let margin = 10
      let image_width = screen_width - margin * 2       //margin 是边距
      let image_height = image_width * 3 / 8            //3:8 就是高:宽比
      return image_height + "px"
    },
  }

2.在view中绑定这个方法中的数据

    <div class="advertisement">

        <img v-for='advertisement in first_part.advertisements' :src="advertisement.picture" alt="" style="width: 100%;  display: block;" v-bind:style="{height: ad_height}"/>

    </div>

返回列表