喵喵笨兔の喵喵的家~遊戲天地

喵喵笨兔の喵喵的家~遊戲天地 - 讓您網頁中的圖片大小隨著視窗做等比例縮放，不會超過視窗範圍之外....

讓您網頁中的圖片大小隨著視窗做等比例縮放，不會超過視窗範圍之外....

在網頁上有些解晰度太大的圖片，其顯示後往往會超出視窗範圍之外，須用橫向捲軸來移動觀看。若要讓解晰度太大的圖片，全部能在視窗範圍內顯示，或隨著視窗的縮放做等比例的縮放，只要在圖片 img 語法內加入 style="max-width:100%" 即可迎刃而解 ^ ^！一般使用此語法，就不要再去限定它的寛和高，不然比例可是會怪怪的哦！>"<

範例程式碼：笨兔以小站圖片中解晰度為 1920x1157 的【太空戰士13-3】圖片來展示，有沒有加入 style 和有沒有設定寛和高，您直接看，或縮放視窗來看，就知差別在哪囉！^ ^

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - 讓您的圖片大小隨著視窗做等比例縮放，不會超過視窗範圍之外....</title>
</head>
<body>
    <p>基本的圖片顯示(有設寛高600x359)：<br>
    <img src="gameimg/ff13-3.jpg" width="600" height="359"></p>

    <p>基本的圖片顯示(無設寬高 - 原始寛高1920x1157)：<br>
    <img src="gameimg/ff13-3.jpg" ></p>

    <p>加入 style 設定的圖片顯示(有設原始寛高)：<br>
    <img src="gameimg/ff13-3.jpg" width="1920" height="1157" style="max-width:100%"></p>

    <p>加入 style 設定的圖片顯示(無設原始寛高)：<br>
    <img src="gameimg/ff13-3.jpg" style="max-width:100%"></p>
</body>
</html>

範例結果：

基本的圖片顯示 (有設寛高600x359)：

基本的圖片顯示 (無設寬高 - 原始寛高1920x1157)：

加入 style 設定的圖片顯示 (有設原始寛高)：

加入 style 設定的圖片顯示 (無設原始寛高)：

笨兔隨手筆記於 2017/10/06

喵喵笨兔の喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv