vue 图片宽高自适应

一、概述

现有一个图片预览功能，目前设置的宽高都是100%。但是这样有一个问题，如果图片的高度太高，图片展示不全。

 

二、解决

vue图片在设置好的div里面自动适应宽高，图片显示全部，不够宽高的留空白

 

本文使用的图片分辨率为：4000x2026

我的电脑分辨率为：1920x1080

默认宽高如果设置100%，电脑屏幕会显示不全的。

 

test.vue

<template>
  <div>
    <div class="rightullidiv">
      <img
        :src="pic"
        alt=""
        class="rightulliimg"
      >
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pic:"https://pic.3gbizhi.com/2021/0923/20210923090744481.jpg"
      }
    },
    mounted() {
    },
    methods: {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .rightullidiv {
    width: 100%;
    /*background: #f2f2f2;*/
    display: flex;
    justify-content: center;
    align-items: center;
    .rightulliimg {
      max-width: 100%;
      max-height: 700px;
    }
  }
</style>

注意：这里设置了图片最高 高度为700，如果高度太高，图片会显示不全。

 

访问页面，电脑屏幕就可以完整的显示图片了。

 

本文参考链接：https://www.geek-share.com/detail/2770531961.html