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>