網頁中如何實現圖片的展示，自己圖片大小的修改#html

知道嗎？其實網頁中有很多種圖片格式，例如網頁中有一種圖片格式叫做 PNG，或者有一種圖片叫 JPEG，還有另外一個名字叫 JPEG。

網頁中其實還有很多其他種圖片的格式，比如 GIF，GIF 一般是用來表示動圖的，而 AVIF 或者 WebP 這些格式可能大部分同學并沒有在網頁中過多的去關注過，甚至還有一些 SVG 或者 BMP 的圖片也有，這些可能不是大多數同學所經常去關注的圖片格式。

今天會在網頁代碼中去實現自己通過引入一張圖片來在網頁中進行展示。圖片是通過圖片標簽進行引入的，寫一個圖片標簽，在 src 屬性里面去寫入當前圖片的地址，當前圖片地址可以用點斜杠表示。

當前去找到 test.jpg 的圖片，找到之后就可以在瀏覽器中進行預覽，通過瀏覽器進行打開就會發現圖片已經展示在瀏覽器中了，但是這張圖片實在是太大了。

可以通過改變代碼標簽中的"width"屬性來修改圖片大小，把它改成 100 寬，這個 100 寬就是指 100px 的意思，但是圖片又變得太小了，怎么辦？可以繼續去修改它大小，把它變成 300。

修改完寬度之后發現圖片是按比例進行伸縮的，也就是說即使不去修改它的 height 高度也能夠放大和縮小，但是一旦手動控制了它的 height 就被壓縮了，所以 height 可以不去設置。如果設置一定要提前知道這張圖片的寬高比例，隨意修改一個寬高都會導致圖片進行的變形。

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教程

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

網頁設計中，添加圖片并為其添加超鏈接是常見的需求。通過使用HTML，我們可以輕松實現這些功能。下面將詳細介紹如何實用地添加圖片，并為圖片添加超鏈接。

html代碼

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

下面是一個簡單的示例，展示如何在HTML中添加圖片：

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

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

接下來，我們來看如何為圖片添加超鏈接。在HTML中，我們使用`<a>`標簽來創建超鏈接。`<a>`標簽的`href`屬性用于指定鏈接的目標地址。為了將圖片包含在超鏈接中，我們可以將`<img>`標簽放置在`<a>`標簽內部。

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

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

在這個示例中，我們將`<img>`標簽放置在`<a>`標簽內部，并通過`href`屬性指定了鏈接的目標地址。當用戶點擊圖片時，將會跳轉到指定的網址。同時，我們還通過`alt`屬性為圖片提供了替代文本，以便在圖片無法加載時為用戶提供提示。

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

需要注意的是，在添加圖片和超鏈接時，我們需要確保所使用的圖片資源是合法且可訪問的。避免使用未經授權或侵權的圖片資源，以免引發法律問題。同時，我們還應該關注圖片的版權和使用協議，確保在使用圖片時遵守相關規定。

總之，通過使用HTML的`<img>`和`<a>`標簽，我們可以輕松地在網頁中添加圖片并為圖片添加超鏈接。通過合理設置屬性和優化技巧，我們可以提升圖片的顯示效果和加載速度，為用戶提供更好的瀏覽體驗。

各位鹿友有什么不懂可以在評論區留言，咱們一起探討學習。

在線咨詢

上一篇：戰“疫”宅在家，北京出版業這些資源可以免費看
下一篇：強大無比！一行命令滿足你的各種需求

您的項目需求

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