圖片同比放大是指在保持圖片寬高比不變的前提下，放大或縮小圖片的大小，以達到更好的顯示效果。在Vue中實現圖片同比放大有多種方法，本文將介紹其中一種常用的方法，并提供代碼示例供參考。

在Vue中，我們可以使用計算屬性來實現圖片同比放大，具體步驟如下：

<template>
<div>
<img v-bind:src="imageUrl" v-bind:style="{ width: imgWidth, height: imgHeight }">
</div>
</template>
<script>
export default {
data() {
return {
imgWidth: null,
imgHeight: null,
aspectRatio: 0.75, // 設置圖片寬高比為4:3
imageUrl: "https://picsum.photos/400/300" // 設置默認圖片地址
};
},
computed: {
// 計算屬性根據容器寬度計算圖片寬高，并保持寬高比不變
getImageSize() {
return () =>{
const containerWidth = this.$el.offsetWidth;
this.imgWidth = containerWidth;
this.imgHeight = containerWidth * this.aspectRatio;
};
}
},
mounted() {
// 在組件掛載后，計算圖片尺寸并監聽窗口大小變化
this.getImageSize();
window.addEventListener("resize", this.getImageSize);
},
beforeDestroy() {
// 在組件銷毀前移除窗口大小變化的監聽
window.removeEventListener("resize", this.getImageSize);
}
};
</script>

代碼解釋：

• 在<template>標簽中，我們使用<img>標簽來展示圖片，并使用v-bind指令綁定圖片地址和樣式。
• 在<script>標簽中，我們通過data選項定義了三個變量：imgWidth和imgHeight表示圖片的寬和高，aspectRatio表示寬高比。
• 我們使用computed選項定義計算屬性getImageSize，該計算屬性返回一個函數，用來計算圖片的寬和高。
• 在mounted鉤子函數中，我們將計算圖片大小的函數掛載到組件上，并且監聽窗口大小變化，以便及時響應窗口大小的改變。
• 最后，在beforeDestroy鉤子函數中，我們移除了窗口大小變化的監聽。

總結：

通過使用計算屬性，我們可以在Vue中實現圖片同比放大，同時保證圖片的寬高比不變，達到更好的顯示效果。上面的代碼示例可以作為實現圖片同比放大的參考，讀者可以根據自身需要進行適當的修改和調整。