知道嗎？其實(shí)網(wǎng)頁(yè)中有很多種圖片格式，例如網(wǎng)頁(yè)中有一種圖片格式叫做 PNG，或者有一種圖片叫 JPEG，還有另外一個(gè)名字叫 JPEG。

網(wǎng)頁(yè)中其實(shí)還有很多其他種圖片的格式，比如 GIF，GIF 一般是用來(lái)表示動(dòng)圖的，而 AVIF 或者 WebP 這些格式可能大部分同學(xué)并沒(méi)有在網(wǎng)頁(yè)中過(guò)多的去關(guān)注過(guò)，甚至還有一些 SVG 或者 BMP 的圖片也有，這些可能不是大多數(shù)同學(xué)所經(jīng)常去關(guān)注的圖片格式。

今天會(huì)在網(wǎng)頁(yè)代碼中去實(shí)現(xiàn)自己通過(guò)引入一張圖片來(lái)在網(wǎng)頁(yè)中進(jìn)行展示。圖片是通過(guò)圖片標(biāo)簽進(jìn)行引入的，寫(xiě)一個(gè)圖片標(biāo)簽，在 src 屬性里面去寫(xiě)入當(dāng)前圖片的地址，當(dāng)前圖片地址可以用點(diǎn)斜杠表示。

當(dāng)前去找到 test.jpg 的圖片，找到之后就可以在瀏覽器中進(jìn)行預(yù)覽，通過(guò)瀏覽器進(jìn)行打開(kāi)就會(huì)發(fā)現(xiàn)圖片已經(jīng)展示在瀏覽器中了，但是這張圖片實(shí)在是太大了。

可以通過(guò)改變代碼標(biāo)簽中的"width"屬性來(lái)修改圖片大小，把它改成 100 寬，這個(gè) 100 寬就是指 100px 的意思，但是圖片又變得太小了，怎么辦？可以繼續(xù)去修改它大小，把它變成 300。

修改完寬度之后發(fā)現(xiàn)圖片是按比例進(jìn)行伸縮的，也就是說(shuō)即使不去修改它的 height 高度也能夠放大和縮小，但是一旦手動(dòng)控制了它的 height 就被壓縮了，所以 height 可以不去設(shè)置。如果設(shè)置一定要提前知道這張圖片的寬高比例，隨意修改一個(gè)寬高都會(huì)導(dǎo)致圖片進(jìn)行的變形。

img圖片等比例縮放的方法

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

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

為了可以與原圖片的大小進(jìn)行對(duì)照，下面的實(shí)例使用HTML的注釋符號(hào)將等比例縮放的代碼進(jìn)行了注釋，第一遍運(yùn)行完之后，可以將第一行的代碼刪除（在線刪除，因?yàn)檫@是一個(gè)在線編輯器），然后將第二行代碼中的注釋符號(hào)去除掉，接著再運(yùn)行一遍看看等比例縮放的效果：

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

height等比例縮放實(shí)例代碼

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

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

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

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

當(dāng)然了，如果要通過(guò)同時(shí)設(shè)置img圖片的width和height兩個(gè)屬性來(lái)達(dá)到等比例縮放圖片的話也是可以的，但是要先計(jì)算一下圖片的寬度和高度的比例，之后再等比例縮放。

來(lái)源：笨鳥(niǎo)工具-璞玉天成，大器晚成

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

免責(zé)聲明：內(nèi)容僅供參考，不保證正確性

網(wǎng)頁(yè)設(shè)計(jì)中，添加圖片并為其添加超鏈接是常見(jiàn)的需求。通過(guò)使用HTML，我們可以輕松實(shí)現(xiàn)這些功能。下面將詳細(xì)介紹如何實(shí)用地添加圖片，并為圖片添加超鏈接。

首先，我們需要了解HTML中如何添加圖片。在HTML中，我們使用`<img>`標(biāo)簽來(lái)插入圖片。`<img>`標(biāo)簽有幾個(gè)重要的屬性，包括`src`、`alt`和`width`、`height`等。`src`屬性用于指定圖片的URL地址，`alt`屬性用于提供圖片無(wú)法加載時(shí)的替代文本，而`width`和`height`屬性則用于設(shè)置圖片的寬度和高度。

下面是一個(gè)簡(jiǎn)單的示例，展示如何在HTML中添加圖片：

<img src="這里寫(xiě)圖片地址，要帶http協(xié)議，比如：https://www.chaojilu.com" alt="看不到圖片，就顯示這個(gè)文字" width="500" height="300">

在這個(gè)示例中，我們使用了`<img>`標(biāo)簽，并通過(guò)`src`屬性指定了圖片的URL地址。同時(shí)，我們還設(shè)置了`alt`屬性以提供替代文本，并通過(guò)`width`和`height`屬性設(shè)置了圖片的尺寸。

接下來(lái)，我們來(lái)看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標(biāo)簽來(lái)創(chuàng)建超鏈接。`<a>`標(biāo)簽的`href`屬性用于指定鏈接的目標(biāo)地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部。

下面是一個(gè)示例，展示如何為圖片添加超鏈接：

<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到圖片，就顯示這個(gè)文字"width="這里寫(xiě)寬度" height="高度">>
</a>

在這個(gè)示例中，我們將`<img>`標(biāo)簽放置在`<a>`標(biāo)簽內(nèi)部，并通過(guò)`href`屬性指定了鏈接的目標(biāo)地址。當(dāng)用戶點(diǎn)擊圖片時(shí)，將會(huì)跳轉(zhuǎn)到指定的網(wǎng)址。同時(shí)，我們還通過(guò)`alt`屬性為圖片提供了替代文本，以便在圖片無(wú)法加載時(shí)為用戶提供提示。

除了基本的添加圖片和超鏈接功能外，我們還可以通過(guò)一些技巧來(lái)優(yōu)化圖片的顯示和加載效果。例如，我們可以使用CSS樣式來(lái)設(shè)置圖片的邊框、圓角等外觀屬性，提升頁(yè)面的美觀度。同時(shí)，我們還可以通過(guò)壓縮圖片文件大小、使用懶加載等技術(shù)來(lái)優(yōu)化圖片的加載速度，提高用戶體驗(yàn)。

需要注意的是，在添加圖片和超鏈接時(shí)，我們需要確保所使用的圖片資源是合法且可訪問(wèn)的。避免使用未經(jīng)授權(quán)或侵權(quán)的圖片資源，以免引發(fā)法律問(wèn)題。同時(shí)，我們還應(yīng)該關(guān)注圖片的版權(quán)和使用協(xié)議，確保在使用圖片時(shí)遵守相關(guān)規(guī)定。

總之，通過(guò)使用HTML的`<img>`和`<a>`標(biāo)簽，我們可以輕松地在網(wǎng)頁(yè)中添加圖片并為圖片添加超鏈接。通過(guò)合理設(shè)置屬性和優(yōu)化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶提供更好的瀏覽體驗(yàn)。

各位鹿友有什么不懂可以在評(píng)論區(qū)留言，咱們一起探討學(xué)習(xí)。