js計(jì)算圖片寬高并且定位圖片位置并且圖片的寬高和定位不能超過父元素的大小

// 計(jì)算圖片寬高并且定位圖片位置并且圖片的寬高和定位不能超過父元素的大小

functionposition(el,img) {

varimgwidth=img.width

varimgheight=img.height

varparent=el.parentNode

varparentwidth=parent.clientWidth||parent.offsetWidth

varparentheight=parent.clientHeight||parent.offsetHeight

if(imgwidth<=parentwidth) {

if(imgheight>=parentheight) {

imgwidth=imgwidth/ (imgheight/parentheight)

imgheight=parentheight

}

}else{

if(imgheight/ (imgwidth/parentwidth) <=parentheight) {

imgheight=imgheight/ (imgwidth/parentwidth)

imgwidth=parentwidth

}else{

imgwidth=imgwidth/ (imgheight/parentheight)

imgheight=parentheight

}

}

conststyle=el.style

style.position='absolute'

style.width=imgwidth+'px'

style.height=imgheight+'px'

style.left= (parentwidth-imgwidth) /2+'px'

style.top= (parentheight-imgheight) /2+'px'

style.visibility='visible'

}

exportdefaultfunctionpositionImg(el) {

el.removeAttribute('style')

if(el.getAttribute('noPosition') ==='') {

el.style.visibility='visible'

return

}

el.removeAttribute('style')

constimg=newImage()

img.onload=function() {

position(el,img)

}

img.src=el.src

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窄俏,一起剝皮案震驚了整個(gè)濱河市是尔,隨后出現(xiàn)的幾起案子昂儒,更是在濱河造成了極大的恐慌虎囚,老刑警劉巖盏筐,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異槐沼,居然都是意外死亡热鞍,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門塑径,熙熙樓的掌柜王于貴愁眉苦臉地迎上來女坑,“玉大人,你說我怎么就攤上這事统舀〈移” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵誉简,是天一觀的道長(zhǎng)碉就。 經(jīng)常有香客問我,道長(zhǎng)闷串,這世上最難降的妖魔是什么瓮钥? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮烹吵,結(jié)果婚禮上碉熄,老公的妹妹穿的比我還像新娘。我一直安慰自己肋拔,他們只是感情好锈津,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凉蜂,像睡著了一般一姿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上跃惫,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音艾栋,去河邊找鬼爆存。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蝗砾,可吹牛的內(nèi)容都是我干的先较。 我是一名探鬼主播携冤,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼闲勺!你這毒婦竟也來了曾棕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤菜循,失蹤者是張志新(化名)和其女友劉穎翘地,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體癌幕,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡衙耕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了勺远。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片橙喘。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖胶逢,靈堂內(nèi)的尸體忽然破棺而出厅瞎,到底是詐尸還是另有隱情,我是刑警寧澤初坠,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布和簸,位于F島的核電站,受9級(jí)特大地震影響某筐,放射性物質(zhì)發(fā)生泄漏比搭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一南誊、第九天 我趴在偏房一處隱蔽的房頂上張望身诺。 院中可真熱鬧,春花似錦抄囚、人聲如沸霉赡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽穴亏。三九已至,卻和暖如春重挑,著一層夾襖步出監(jiān)牢的瞬間嗓化,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國打工谬哀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留刺覆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓史煎,卻偏偏與公主長(zhǎng)得像谦屑,于是被迫代替她去往敵國和親驳糯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容