【根據元素或裝置寬動態設定圖片高度】
阿新 • • 發佈：2018-12-13
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>img Adaptive</title> <style> body { margin: 0; padding: 0; } .img-box { display: flex; justify-content: space-around; flex-wrap: wrap; /*這裡給它自動換行*/ } .img-box img { width: calc(100%/3 - 2px); /*三列一行，左右間距2px*/ } </style> </head> <body> <div class="img-box"> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> <img src="./timg.jpg" alt=""> </div> </body> <script> // 這裡是取body的寬為基準來設定圖片的高度 var deviceWidth = document.getElementsByTagName('body')[0].offsetWidth; var height = 'height:' + (deviceWidth/3 - 2) + 'px'; // 這裡設定為正方形，所以高度等於圖片的寬 /** * * @param selector:要設定高度元素的css選擇器 * @param css:樣式字串（屬性名:樣式） * @param style_id:<style>標籤的id */ function adaptive_img_height(selector, css, style_id) { // 如果一直動態載入樣式標籤不友好，所以這裡先刪除原有的。 var oldStyle = document.getElementById(style_id); if (oldStyle) { oldStyle.remove(); } // 建立<style>標籤和樣式字串 var style = document.createElement('style'); var cssTextNode = document.createTextNode(selector + '{' + css + '}'); style.type = 'text/css'; style.id = style_id; style.appendChild(cssTextNode); // 將樣式字串append到<style>標籤裡 document.getElementsByTagName('head')[0].appendChild(style); // 將拼接好的<style>標籤append到<head> } // 監聽視窗的尺寸的重新計算（改變） window.onresize = function (ev) { var deviceWidth = document.getElementsByTagName('body')[0].offsetWidth; var height = 'height:' + (deviceWidth/3 - 2) + 'px'; adaptive_img_height('.img-box img', height, 'imgAdaptive') }; adaptive_img_height('.img-box img', height, 'imgAdaptive'); </script> </html>