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>
View Code

注意:這裏設置了圖片最高 高度爲700,如果高度太高,圖片會顯示不全。

 

訪問頁面,電腦屏幕就可以完整的顯示圖片了。

 

本文參考鏈接:https://www.geek-share.com/detail/2770531961.html

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章