Javascript圖片縮放不變形

在WEB頁(yè)面中，經(jīng)常需要使用圖片來(lái)美化頁(yè)面，但是圖片大小卻一定和頁(yè)面的布局不相符，這就需要使用圖片縮放來(lái)解決。但是，圖片縮放往往會(huì)導(dǎo)致圖片的失真和變形。那么，如何在Javascript中實(shí)現(xiàn)圖片縮放不失真的效果呢？

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

首先，我們來(lái)看一下CSS中的object-fit屬性的應(yīng)用。該屬性可以控制圖片的填充方式，盡可能地填充占據(jù)整個(gè)容器，并保持圖片原有的比例。此時(shí)，可以將圖片放在容器內(nèi)部，并使用object-fit屬性進(jìn)行填充。

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

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

除此之外，在Javascript中也可以使用一些技巧來(lái)實(shí)現(xiàn)圖片縮放不變形的效果。其中，最經(jīng)典的例子就是進(jìn)行等比縮放。具體實(shí)現(xiàn)方式如下：

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

在上述代碼中，我們對(duì)圖片進(jìn)行了等比縮放的處理，并且保證了圖片不會(huì)變形，同時(shí)，圖片可以隨著窗口大小的變化而進(jìn)行自適應(yīng)的處理，達(dá)到了一個(gè)美觀、合理的效果。

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

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