一、概述
現有一個圖片預覽功能,目前設置的寬高都是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