html中img圖片進行等比例縮放的實例代碼

tml中img圖片進行等比例縮放的實例代碼

img圖片等比例縮放的方法

HTML中，要修改img元素定義的圖片的大小，且是等比例縮放，不改變寬和高的比值，那么可以采用只設置img元素屬性中width和height中的任何一個，不要同時設置兩個即可實現img圖片的等比例縮放效果。下面將通過兩個實例來分別實現這兩種方法。

width等比例縮放img圖片實例代碼，及在線編輯器

為了可以與原圖片的大小進行對照，下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋，第一遍運行完之后，可以將第一行的代碼刪除（在線刪除，因為這是一個在線編輯器），然后將第二行代碼中的注釋符號去除掉，接著再運行一遍看看等比例縮放的效果：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->

height等比例縮放實例代碼

這邊的代碼與上面的幾乎一樣，只是將width的屬性修改成為height的屬性，如下：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->

提示：如上面的兩個實例，將width和height分別設置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。

等比例縮放的另外一種方法

當然了，如果要通過同時設置img圖片的width和height兩個屬性來達到等比例縮放圖片的話也是可以的，但是要先計算一下圖片的寬度和高度的比例，之后再等比例縮放。

來源：笨鳥工具-璞玉天成，大器晚成

原文：html img圖片等比例縮放的代碼 | HTML教程

免責聲明：內容僅供參考，不保證正確性

mg標簽的應用場景

我們平時在瀏覽網站的過程中如果只有文字的話難免會有些太單調了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進行點綴，這就用到了今天我要教給大家的圖像標簽img。

img標簽的組成

src：圖片的路徑這個是必須要有的

title：當我們把鼠標移動到圖片上展示的文本內容

alt：當圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內容

width：設置圖片的寬度

height：設置圖片的高度

img標簽的使用

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<pre>

../:代表上一級目錄

../../：上上級目錄

當前目錄中的文件夾下使用：文件夾名稱/圖片名稱

上n級目錄下的n級文件夾：n個../+n個文件夾的名稱直到找到圖片文件為止

</pre>

<img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350"

height="300" title="這是上一級目錄中的圖片">

</body>

</html>

瀏覽器預覽效果圖

以上就是img圖片標簽的簡單應用

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>

<img src="../img/2.png" alt=""/>
<br><!-- 20% 是相對于父塊的寬度 此處是body的寬度 -->
<!-- 20% 只是等比例縮放 我實測，以width的比例縮放，沒有定義width比例 則再以height比例縮放--><img src="../img/2.png" width="20%" height="10%" border="1px" alt="photo"/>
<br>
<img src="../img/2.png" width="100px" height="200px" border="1px" alt="photo"/>

</body>
</html>

在線咨詢

上一篇：HTML添加背景音樂(embed、audio)
下一篇：移動HTML5模擬觸摸屏長按事件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商