Javascript圖片縮放不變形

在WEB頁面中，經常需要使用圖片來美化頁面，但是圖片大小卻一定和頁面的布局不相符，這就需要使用圖片縮放來解決。但是，圖片縮放往往會導致圖片的失真和變形。那么，如何在Javascript中實現圖片縮放不失真的效果呢？

一般來說，如果是對圖片進行放大，我們無法做到不失真的效果，但是從小圖放大到合適的尺寸，我們就需要用一些技巧來避免圖片變形。比較常用的方法是：采用CSS中的object-fit屬性或在Javascript中進行相關處理。

首先，我們來看一下CSS中的object-fit屬性的應用。該屬性可以控制圖片的填充方式，盡可能地填充占據整個容器，并保持圖片原有的比例。此時，可以將圖片放在容器內部，并使用object-fit屬性進行填充。

<div style="width:200px;height:200px">
<img src="image.png" style="width:100%; height:100%; object-fit:contain;">
</div>

在上述代碼中，我們可以看到采用了object-fit屬性后，圖片能夠適應容器的大小，并且保持了圖片不變形的效果。

除此之外，在Javascript中也可以使用一些技巧來實現圖片縮放不變形的效果。其中，最經典的例子就是進行等比縮放。具體實現方式如下：

<div id="imgs" style="width:200px;height:200px;text-align:center;margin:0 auto;">
<img id="img" src="image.png">
</div>
<script>
function autoImgSize(){
var img = document.getElementById('img');
var div = document.getElementById('imgs');
var imgW = img.width;
var divW = div.clientWidth;
var scale = divW/imgW;
img.width = divW;
img.height = parseInt(scale * img.height);
}
window.onload = function(){
autoImgSize();
}
window.onresize = function(){
autoImgSize();
}
</script>

在上述代碼中，我們對圖片進行了等比縮放的處理，并且保證了圖片不會變形，同時，圖片可以隨著窗口大小的變化而進行自適應的處理，達到了一個美觀、合理的效果。

除此之外，其他計算圖片寬、高比例的處理方式也可以用。

根據以上兩種方法，結合不同的實際需求，在Javascript中實現圖片縮放不失真的效果就可以輕松實現了。做好圖像放大縮小的處理，能夠有效提升頁面美觀度和用戶體驗，讓你的頁面更加精彩。