一、概述

現有一個圖片預覽功能，目前設定的寬高都是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