整合營銷服務商

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

          免費咨詢熱線:

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

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

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

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

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

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

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

          頁美工培訓機構教你用讓背景圖片拉伸填充的css屬性,比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。

          所以實際的結果是只能重復顯示,所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來

          控制背景圖片的顯示的。所以一般用作背景圖片的有2類:



          1.是一整張大圖,尺寸和區域大小剛好吻合

          2.一個很小的條狀圖,通過repeat后,形成一個很規則的大圖背景。

          但是css3出現以后,這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。

          而且這個屬性在firefox,chrome,以及ie9上都可以使用。

          具體使用方法如下:(上海網頁美工設計培訓)

          背景圖尺寸(數值表示方式):

          #background-size{

          background-size:200px 100px;

          }

          欲善其事,必先利其器。在我們開發的過程中,一些“輪子”、工具能夠幫助我們應對項目中切實的需求,提升開發的效率。所以,日常收集一些庫或工具就顯得尤為重要了。畢竟,遇見需求/問題的時候,能做到“家有余糧,心中不慌。”

          在本期中,我依然精選了一些近期收羅的開源庫、工具以及我的微博上 #每日一Pen# 話題中大家轉發較多的編程靈感,希望你們有所收獲。


          前端

          1. TypeLighter.js

          TypeLighter.js 是一款輕量級(Gzip 壓縮后僅 1.04KB)的 JS 庫,能夠幫助你實現打字機效果。它提供了 8 個屬性(寫入速度、寫入/刪除延遲等)供你微調,更改 data 屬性即可更改其值。 ????

          項目地址:

          https://github.com/EdernClemente/TypeLighterJS

          2.Clendar

          Clendar 是一款輕量級、無依賴的 JS 日歷組件。它具備簡潔的 API,適用于 React、Vue、Angular 等框架。 ????

          項目地址:

          https://github.com/simbawus/calendar

          3.Lax.js

          Lax.js 是一款輕量的 Vanilla JS 插件,當頁面滾動時,創建流暢、炫酷的動畫效果,讓你的網站“動”起來。

          項目地址:

          https://github.com/alexfoxy/laxxx

          4.HIUI

          HIUI 是由小米開源的面向中后臺系統的前端組件庫。它以用戶體驗一致性為出發點,提供類型全面的組件庫和頁面模板,幫助開發人員快速實現交互一致、界面美觀的界面開發。 ?

          項目地址:

          https://github.com/XiaoMi/hiui

          5.awesome-coding-js

          這個倉庫整合了大量算法和數據結構的 JavaScript 實現,涉及經典排序算法、二叉樹、鏈表、字符串等內容,鞏固基礎的朋友,可以關注下。

          項目地址:

          https://github.com/ConardLi/awesome-coding-js

          6.JS-Dev-Reads

          專為 JS 開發者匯總的閱讀清單,涉及圖書推薦、文章精選等內容。

          項目地址:

          https://github.com/twhite96/js-dev-reads


          后端

          1.JetCache

          JetCache 是由阿里巴巴開源的通用緩存訪問框架,它提供了統一的 API 和注解來簡化緩存的使用。如果你了解 SpringCache 的話,那么更容易接受它,因為它比 SpringCache 更強大。它支持 TTL、兩級緩存、分布式緩存自動刷新、異步 Cache API,還可以手動去操作緩存實例。

          項目地址:

          https://github.com/alibaba/jetcache

          2.architect-awesome

          一套非常全面的后端架構師技術圖譜,從數據結構與算法著手,帶你學習后端技術的方方面面。目前 GitHub 上已有 3.7W Star,值得推薦。

          項目地址:

          https://github.com/xingshaocheng/architect-awesome

          3.Bistoury

          Bistoury 是去哪兒網開源的一個對應用透明,無侵入的 Java 應用診斷工具。它提供了在線 Debug、線程級 CPU 監控等諸多功能,幫助開發人員直接通過日志、內存、線程、類信息、調試、機器和系統屬性等各個方面對應用進行診斷,提升開發人員的診斷效率和診斷能力。

          項目地址:

          https://github.com/qunarcorp/bistoury

          4.Python-Crawler-Tutorial-Starts-From-Zero

          這是 Python 從零到一爬蟲系列教程。教程涉及爬蟲預備知識、請求分析流程、Requests 模塊的使用等基礎知識部分,以及 3 個項目實例內容,幫助你零到一學會 Python 爬蟲。

          項目地址:

          https://github.com/Kr1s77/Python-crawler-tutorial-starts-from-zero

          5.VHR

          VHR(微人事)是一個由 SpringBoot+Vue 開發的人力資源管理系統。項目采用前后端分離,并提供了詳細的開發文檔,供參考與學習。

          項目地址:

          https://github.com/lenve/vhr


          移動端

          1.Morec

          Morec 是一個精美的 Flutter 版電影客戶端。它利用了豆瓣現有的 API,實現了具備電影搜索、電影榜單、詳情介紹等完整功能的電影展示,或許這個項目能給你一些參考。 ?

          項目地址:

          https://github.com/Mayandev/morec

          2.PickerView

          這是一個非常好用的 Android PickerView 庫,內部提供 2 種常用類型的 Picker.它支持擴展自定義 Picker、自定義彈窗,也可作為 View 的非彈窗場景。

          項目地址:

          https://github.com/jaaksi/pickerview

          3.Xpush

          Xpush 是一款輕量級、可插拔的 Android 消息推送框架。它集成便捷,提供了一鍵集成推送(極光推送、友盟推送、華為、小米推送等),它具備豐富的功能(支持推送相關的注冊、注銷,標簽的增加、刪除、獲取等操作),還支持統一的消息訂閱、增加消息過濾器、支持 Android 9.0.

          項目地址:

          https://github.com/xuexiangjys/XPush


          工具/資源

          1.React Image Crop

          React Image Crop 是一款響應式圖像剪裁工具,它具備輕量、無依賴、響應式、支持觸控等特性。

          項目地址:

          https://github.com/DominicTobias/react-image-crop

          2.Chrome 插件英雄榜

          這個倉庫匯集了眾多優秀、實用的 Chrome 插件,并提供了詳盡的說明?;蛟S,你會淘到自己喜歡的工具。

          項目地址:

          https://github.com/zhaoolee/ChromeAppHeroes

          3.Microsoft Whiteboard

          Microsoft Whiteboard 是由微軟推出的一款電子白板軟件,能幫助你便捷的記錄想法、靈感與創意。它支持實時協作,云端保存等功能。目前可以免費下載,喜歡的朋友可以試試。 ????

          項目地址:

          https://products.office.com/zh-cn/microsoft-whiteboard/digital-whiteboard-app

          4.StarrySky

          這是一個豐富的音樂播放封裝庫。它針對快速集成音頻播放功能,減少大家搬磚的時間,提升開發效率。

          項目地址:

          https://github.com/EspoirX/StarrySky

          5.Awesome Actions

          這個倉庫匯集了與 GitHub Actions 相關的優質內容。除了官方推薦以外,作者還匯總了 Actions 相關的工具、應用、測試、服務等眾多內容。 ?

          項目地址:

          https://github.com/sdras/awesome-actions

          6.A Programmer's Guide to English

          這是一個專為程序員編寫的英語學習指南。面對網上雜七雜八的英語學習技巧,如果想要學好英語,這個指南將會減少你不必要花費的時間。

          項目地址:

          https://github.com/yujiangshui/A-Programmers-Guide-to-English


          編程靈感

          1.Simple CSS Waves

          純 CSS 實現簡單的波浪動畫。

          查看源碼:

          https://codepen.io/goodkatz/pen/LYPGxQz

          2.CSS 3D Carousel Room

          CSS+JS 實現 3D Carousel Room 效果。

          查看源碼:

          https://codepen.io/Anemolo/pen/ERPvZV

          3.Pure CSS Cute Cup

          純 CSS 繪制可愛杯子動畫。

          查看源碼:

          https://codepen.io/keirafoxy/pen/JgdBVW

          4.Play Hard

          HTML+CSS+JS 實現《Play Hard》文字伸縮炫彩動畫。

          查看源碼:

          https://codepen.io/chrisgannon/pen/KONLar

          5.CSS Only-Social Icons

          純 CSS 實現帶有 Hover 效果的社交圖標。

          查看源碼:

          https://codepen.io/Stockin/pen/aQoQGr


          彩蛋

          100 Days Of ML Code

          人工智能一直是科技領域的熱點,目前市場的需求也更為強烈,所以想學它人不在少數。但是,面對網絡上良莠不齊的學習資源,鑒別和甄選其價值卻耗費了我們不少時間與精力。今天分享的《100 Days Of ML Code》——百日機器學習計劃,在 GitHub 上可謂相當火爆,于是有熱心網友就將其翻譯成了中文版本,供大家參考與學習。

          這是一個系統的學習計劃,作者圖文并茂的講述了機器學習的相關概念,并有源碼輔助教學,內容從易到難、循序漸進的幫你掌握機器學習的概念與應用,推薦給大家。

          項目地址:

          https://github.com/MLEveryday/100-Days-Of-ML-Code


          感謝你的閱讀。若你有所收獲,點贊與分享是給我最大的支持。

          注:

          如需轉載,煩請按下方注明出處信息,謝謝!

          作者:IT程序獅

          原文地址:

          https://zhuanlan.zhihu.com/p/81911980


          同時也歡迎關注我的微信公眾號【IT程序獅】,不定期分享 IT 學習文章與資源。

          更多文章

          1.開源精粹!18 個值得關注的開源項目與工具

          2.開源精粹(二)!22 個實用、有趣的開源項目

          3.開源精粹(三)!程序員必備的21款工具與編程靈感


          主站蜘蛛池模板: 无码国产精品一区二区免费16 | 99精品国产高清一区二区三区| 精品人妻少妇一区二区三区| 无码人妻一区二区三区一| 日韩精品一区二区三区在线观看| 韩国福利影视一区二区三区| 伊人色综合一区二区三区| 日韩精品无码人妻一区二区三区 | 人妻夜夜爽天天爽一区| 亚洲国产美国国产综合一区二区 | 久久精品国产一区二区三区 | 中文字幕aⅴ人妻一区二区| 性色AV 一区二区三区| 精品国产亚洲一区二区三区在线观看 | 91精品国产一区| 国产亚洲一区二区三区在线观看| 在线观看日韩一区| 国产成人高清亚洲一区久久| 在线精品国产一区二区| 亚欧免费视频一区二区三区| 精品视频一区二区三三区四区| 国语精品一区二区三区| 国产一区二区三区不卡观| 国产av成人一区二区三区| 欧洲精品码一区二区三区免费看 | 日韩亚洲一区二区三区| 亚洲AV综合色区无码一区| 中文字幕一区日韩在线视频 | 国产成人无码一区二区在线观看| 中文字幕一区二区区免| 国内偷窥一区二区三区视频| 国产午夜精品一区理论片飘花| 国产品无码一区二区三区在线蜜桃| 东京热无码av一区二区| 亚洲国产老鸭窝一区二区三区| 国产福利一区二区三区| 成人丝袜激情一区二区| 无码人妻一区二区三区在线水卜樱 | 日韩一区二区电影| 国产乱码精品一区二区三区中| 亚洲AV一区二区三区四区|