整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

          條APP上有個截圖分享功能,就是把文章轉成一張圖片,然后分享到各渠道中去,如微信、QQ等,非常實用,因此,打算就這項功能自己封裝為一個組件ImageGenerator,后期專門進行圖片生成,html是其中的一個源。


          頭條截圖分享的實際效果圖


          目前前端使用較多的html轉圖片的工具是Html2Canvas,考慮技術儲備和問題討論的充裕性,決定封裝一下這個工具。步驟如下:


          安裝HTML2Canvas

          按照官方要求,做安裝操作:

          npm

          npm install html2canvas


          我當時下載的是1.4.1的版本。



          這個工具有自身的一些限制,使用時要注意:

          [1] 并非真正的截圖軟件,而是根據DOM繪制出來的,其繪制能力,完全依賴于工具對DOM和對應屬性的支持和理解;

          [2] 因為使用了Canvas支持,生成圖片的區域不能再有Canvas應用,否則會干擾工具的生成,不能保證生成預期,因此,如果使用了Canvas圖表的應用這個工具不推薦使用


          封裝ImageGenerator

          這個很簡單,這里就是封裝一個組件,用于后期引入html之外的源生成圖片,同時也做一下圖片的統一顯示,從而和系統整體的設計進行配合。大致的實現思路如下:



          上圖,我們引入了工具本身,并設置的結果的顯示區。生成的結果將以節點的方式注入 #image-box 中。


          上圖,封裝了一個方法,用途是利用Html2Canvas工具獲得圖片,這里我們引入了一個組件的數據imageData用以存儲和干預生成結果。在這里,我把ImageGenerator封裝為全局組件。


          應用場景

          我們在文章的尾部加入一個share功能,點擊彈出分享設置的彈窗,實際效果如下圖所示:




          以上技術實現比較簡單,這里就不進行贅述了。上圖中,我們設置了一個生成圖像按鈕,點擊該按鈕則可以觸發我們組件中的對應操作。關鍵思路包括:

          【1】這里設置了一個封裝組件shareHandler,封裝了前導模塊和imageGenerator,這兩個模塊的顯示通過一個開關進行控制,該開關則通過圖像生成成功事件進行賦值,這樣的話,我們可以實現圖片生成后,不再顯示前導模塊,而是顯示圖片結果,即ImageGenerator。


          【2】這里有一個比較關鍵的操作是shareHandler通過觸發事件將轉換器發射到文章轉換現場,為什么用事件,還是那句話,事件對于解耦和消除組件依賴是最自然的實現。注意,這里我把imageGenerator通過引用的方式作為參數傳出了,這樣的好處是事件將轉換器代入了轉換現場,并可以攜帶回現場轉換結果。



          【3】在文章查看器,solutionViewer中,自然會訂閱事件、事件處理和取消訂閱。注意這里的事件處理,實際上是調用了轉換器中我們封裝的函數,參數則是現場取得的,這里的機制很簡單,定義要轉換div的id,作為參數傳入函數。



          那么,點擊圖像后,我們可以看到效果圖:



          點擊右鍵另存圖像,我們可以獲得一張png格式的圖片,至于后續對下載和到粘貼板的支持,大家可以自行研究和實現。



          注意事項

          實現過程中有幾個注意事項:

          【1】Canvas返回時,其長寬都是按照實際大小生成的,而我們的例子中,則要根據右抽屜式的彈窗做width=100%,height=auto的處理,這個要如何實現,就是要通過我們在imageGenerator中引入的imageData。


          【2】我們的文章顯示中,引入了文件管理的微服務,因此,文章中圖片的鏈接都是跨域的,所以,必須打開html2Canvas的跨域選項,在封裝的組件里,我是通過一共一個defaultOptions來實現這一點的。



          這個選項可以在轉換場景提供,也可提供一系列的默認值,最常用的除跨域外,還有是否允許log輸出等開關,大家感興趣可以自行查閱html2Canvas的官網。


          內容比較簡單,大家如果有這個應用場景,可以參考實現一下,有問題歡迎大家隨時交流。謝謝大家的支持。

          這里是云端源想IT,幫你輕松學IT”

          嗨~ 今天的你過得還好嗎?

          無論種子散落在何處

          都會長出一棵樹

          向著天空,掙扎生長

          - 2024.03.15 -

          HTML圖片標簽和超鏈接標簽是網頁開發中常用的兩種標簽,它們分別用于在網頁中插入圖片和創建超鏈接。

          我們每天都在互聯網世界中與各種形式的信息打交道。你是否好奇過,當你點擊一篇文章中的圖片或鏈接時,是什么神奇的力量讓你瞬間跳轉到另一個頁面?



          今天,就讓我們一起揭開HTML圖片標簽和超鏈接標簽的神秘面紗。


          一、HTML圖片標簽

          HTML圖片標簽是一種特殊的標記,它可以讓網頁顯示圖像。通過使用圖片標簽,我們可以在網頁上展示各種圖片,從而讓網頁更加生動有趣。

          1、語法結構

          HTML圖片標簽的語法結構非常簡單,只需要使用<img>標簽,并在其中添加src屬性,指定圖片的路徑即可。

          例如:

          <img src="image.jpg" alt="描述圖片的文字">


          2、圖片格式

          HTML支持多種圖片格式,包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點,可以根據需要選擇合適的格式。


          3、圖片屬性

          除了src屬性外,HTML圖片標簽還有其他一些常用的屬性,如:

          • alt屬性用于描述圖片的內容,當圖片無法顯示時,會顯示該屬性的值;
          • width和height屬性用于設置圖片的寬度和高度;
          • title屬性用于設置鼠標懸停在圖片上時顯示的提示信息。



          4、網絡圖片的插入

          當需要插入網絡上的圖片時,可以將圖片的URL地址作為src屬性的值。例如:

          <img src="https://www.example.com/images/pic.jpg" alt="示例圖片">


          5、本地圖片的插入

          當需要插入本地圖片時,可以將圖片的相對路徑或絕對路徑作為src屬性的值。


          6、相對路徑與絕對路徑

          在這里再給大家介紹兩個概念,相對路徑與絕對路徑,搞懂它們,我們在插入本地圖片時也能得心應手。

          相對路徑:

          相對于當前HTML文件所在目錄的路徑,包含Web的相對路徑(HTML中的相對目錄)。例如,如果圖片文件位于與HTML文件相同的目錄中,可以直接使用文件名作為路徑:

          <img src="pic.jpg" alt="本地圖片">


          絕對路徑:

          圖片文件在計算機上的完整路徑(URL和物理路徑)。例如:

          <img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">


          二、HTML超鏈接標簽

          超鏈接標簽是HTML中另一個重要的元素,它可以實現網頁之間的跳轉。通過使用超鏈接標簽,我們可以將文本、圖片等內容設置為可點擊的鏈接,方便用戶在不同頁面之間自由切換。

          1、語法結構

          超鏈接標簽使用<a>標簽表示,需要在href屬性中指定鏈接的目標地址。

          <a href="目標地址" title="標題">文本內容</a>

          例如:

          <a href="https://www.ydcode.cn/">點擊訪問示例網站</a>


          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>示例網站</title>
          </head>
          <body>
          <h1>歡迎來到云端源想!</h1>
          <p>這是一個簡單的HTML頁面,用于展示一個網站的結構和內容。</p>
          <a href="https://www.ydcode.cn/">點擊訪問示例網站</a>
          </body>
          </html>

          2、鏈接目標

          超鏈接可以鏈接到不同的目標,包括其他網頁、電子郵件地址、文件下載等。通過設置href屬性的值,可以實現不同的鏈接目標。



          3、鏈接屬性

          超鏈接標簽還有一些其他常用的屬性,如:

          • target屬性用于設置鏈接打開的方式,可以選擇在新窗口或當前窗口打開鏈接;
          • title屬性用于設置鼠標懸停在鏈接上時顯示的提示信息;
          • rel屬性用于設置鏈接的關系,例如設置nofollow值可以告訴搜索引擎不要跟蹤該鏈接。

          想要快速入門前端開發嗎?推薦一個前端開發基礎課程,這個老師講的特別好,零基礎學習無壓力,知識點結合代碼,邊學邊練,可以免費試看試學,還有各種輔助工具和資料,非常適合新手!點這里前往學習哦!云端源想

          4、錨點鏈接標簽

          錨點標簽用于在網頁中創建一個可以點擊的錨點,以便用戶可以通過點擊錨點跳轉到頁面中的其他部分。

          錨點標簽的語法為:

          <a name="錨點名稱"></a>


          例如,可以在頁面中的一個段落前添加一個錨點:

          <a name="section1"></a>
          <p>這是一個段落。</p>


          然后,可以在頁面的其他位置創建一個指向該錨點的超鏈接:

          <a href="#section1">跳轉到第一節</a>

          當用戶點擊“跳轉到第一節”鏈接時,頁面將滾動到名為“section1”的錨點所在的位置。



          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>示例網站</title>
          </head>
          <body>
          <h1>歡迎來到云端源想!</h1>
          <p><a href="#section1">跳轉到第一節</a></p>
          <p>這是一個段落。</p>
          <p>這是另一個段落。</p>
          <p>這是第三個段落。</p>
          <a name="section1"></a>
          <p>這是第一節的內容。</p>
          </body>
          </html>

          三、總結

          HTML圖片標簽和超鏈接標簽是構建網頁的兩個重要元素,它們不僅豐富了網頁的內容,還為網頁添加了動態和互動性。


          通過學習和掌握這兩個標簽的使用方法,我們可以創建更加豐富和互動的網頁,為用戶提供更好的瀏覽體驗。無論是展示精美的圖片,還是實現頁面之間的跳轉,HTML圖片標簽和超鏈接標簽都能幫助我們實現更多的創意和功能。


          讓我們一起探索HTML的奇妙世界,創造出更加精彩的網頁吧!


          我們下期再見!

          END

          文案編輯|云端學長

          文案配圖|云端學長

          內容由:云端源想分享


          主站蜘蛛池模板: 国产美女av在线一区| 国产一区二区三区在线观看精品| 无码一区二区三区爆白浆| 一区二区视频在线免费观看| 中文字幕一区视频| 成人区精品人妻一区二区不卡| 色屁屁一区二区三区视频国产| 2021国产精品视频一区| 国产激情无码一区二区| 色一情一乱一伦一区二区三区| 四虎在线观看一区二区| 久久中文字幕无码一区二区| 国产一区二区三区韩国女主播| 亚洲视频免费一区| 久久精品一区二区三区AV| 亚洲国产精品一区二区第一页| 岛国无码av不卡一区二区| 国产福利视频一区二区| 国产一区视频在线| 无码日韩精品一区二区免费暖暖 | 精品免费AV一区二区三区| 天海翼一区二区三区高清视频| 中文字幕无码不卡一区二区三区| 无码乱码av天堂一区二区| 国产精品合集一区二区三区| 在线观看一区二区三区av| 亚洲AV无码片一区二区三区| 无码丰满熟妇浪潮一区二区AV| 亚洲AV香蕉一区区二区三区| 日韩免费视频一区| 激情综合丝袜美女一区二区| 国产福利一区二区在线视频| 好爽毛片一区二区三区四| 久久精品免费一区二区三区| 色国产精品一区在线观看| 亚洲av无码一区二区三区四区| 国内精品视频一区二区八戒| 一区二区在线视频免费观看| 成人免费av一区二区三区| 日韩精品乱码AV一区二区| 亚洲Av永久无码精品一区二区|