圖片完美縮放
更新時(shí)間：2006年09月07日 00:00:00 作者：
在公司的工作經(jīng)常要為客戶作產(chǎn)品展示的頁(yè)面，由于客戶上傳的圖片格式大小不一，縮放后會(huì)導(dǎo)致變形，于是在星期天抽了點(diǎn)時(shí)間，寫了一段JS代碼，支持圖片的完美縮放。
首先給圖片加個(gè)<div></div>標(biāo)簽對(duì)，img中不能定義高度或?qū)挾?，如下?
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會(huì)把界面撐得太難看。
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j<reImgs.length;j++){
if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
if (reImgs[j].height==reImgs[j].width) {
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j].height=h;
} else if (reImgs[j].height<reImgs[j].width){
reImgs[j].width=w;
}
}
}
}
測(cè)試后，圖片大小完美縮放，也解決了在載入時(shí)會(huì)把界面撐得很難看的問題。
首先給圖片加個(gè)<div></div>標(biāo)簽對(duì)，img中不能定義高度或?qū)挾?，如下?
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中寫入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會(huì)把界面撐得太難看。
復(fù)制代碼 代碼如下:
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j<reImgs.length;j++){
if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
if (reImgs[j].height==reImgs[j].width) {
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j].height=h;
} else if (reImgs[j].height<reImgs[j].width){
reImgs[j].width=w;
}
}
}
}
測(cè)試后，圖片大小完美縮放，也解決了在載入時(shí)會(huì)把界面撐得很難看的問題。
相關(guān)文章
利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹，實(shí)現(xiàn)過程很簡(jiǎn)單，有需要的可以參考借鑒。2016-08-08
js實(shí)現(xiàn)省市級(jí)聯(lián)效果分享
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)省市級(jí)聯(lián)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02
JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05
5款JavaScript顏色選擇器(含jQuery插件)。2009-10-10
一文教你學(xué)會(huì)用JS實(shí)現(xiàn)圖片懶加載功能
圖片懶加載是日常開發(fā)會(huì)經(jīng)常使用的一個(gè)功能,但是在日常中可能使用v-lazy便直接實(shí)現(xiàn)了圖片懶加載,但是本文將通過原生js來實(shí)現(xiàn)一下圖片懶加載的功能，感興趣的同學(xué)跟著小編一起來看看吧2023-07-07
10個(gè)很少使用的JavaScript?Console方法分享
你一定聽說過?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺(tái)方法,以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
下面小編就為大家?guī)硪黄狫S中對(duì)象與字符串的互相轉(zhuǎn)換詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本文主要介紹了js獲取ip和地區(qū)的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
生命周期是指一個(gè)對(duì)象從創(chuàng)建→>運(yùn)行>銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段，文中介紹了小程序中組件的生命周期，需要的朋友可以參考下2023-03-03