今天就跟大家聊聊有關Javascript中怎么防止圖片拉伸,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供保定企業(yè)網(wǎng)站建設,專注與網(wǎng)站設計、成都網(wǎng)站建設、H5技術、小程序制作等業(yè)務。10年已為保定眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
第一步:先畫個框框 (這里順便安利一種自適應框框的方法)
// 假定需要一個在750px屏幕下寬400px,高280px的盒子 // 寬度 = 400 / 750 = 0.5333 // 高度 = 280 / 400 * 0.5333 = 0.3733 <style> .img-box{ position: relative; width: 53.33%; height: 0; padding-bottom: 37.33%; overflow: hidden; background-color: #eee; } </style> <body> <div id="list"> <div class="img-box"> <img src="..."/> </div> </div> </body>
第二步:設置圖片需要使用到的css
<style> .width{ position: absolute !important; width: 100% !important; min-height: 100% !important; top: 50% !important; transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -moz-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; -o-transform: translateY(-50%) !important; display: block; } .height{ position: absolute !important; height: 100% !important; min-width: 100% !important; left: 50% !important; transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; -moz-transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; -o-transform: translateX(-50%) !important; display: block; } </style>
第三步:js獲取圖片高度比較并給img添加類名
//需要注意的是,不能在css中直接給img設置寬度和高度 //否則在img.onload后獲取的寬高是css設置的寬高 //同時建議使用dom對象來獲取img標簽 <script> var list = document.getElementById('list'); getImgWH ( list ); //執(zhí)行寬高比對并設置img類名 function getImgWH ( Obj ) { var img = Obj.getElementsByTagName('img'); for( var i=0 ; i<img.length ; i++ ){ img[i].onload = function(){ var width = this.width; var height = this.height; if ( width > height ) { this.classList.add('height'); } else if ( width < height ) { this.classList.add('width'); } else { this.style.width = '100%'; this.style.height = '100%'; } } } } </script>
看完上述內(nèi)容,你們對Javascript中怎么防止圖片拉伸有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
當前標題:Javascript中怎么防止圖片拉伸
路徑分享:http://bm7419.com/article24/iihgje.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供自適應網(wǎng)站、品牌網(wǎng)站設計、網(wǎng)站制作、動態(tài)網(wǎng)站、搜索引擎優(yōu)化、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)