|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 在建設網站時,基本都會要求網站有能自適應的效果,那么其中實現圖片自適應是一個非常重要的操作。一張圖片的顯示,離不開寬和高這兩個值 。首先我們需要了解css中關于圖片寬高值屬性的相關知識點。這里給大家簡單的總結一下。1、width 屬性設置元素的寬度。這個屬性定義元素內容區的寬度。 可能值有:auto 自動寬度;length px、cm 等單位定義的寬度; % 百分比寬度;inherit 規定應該從父元素繼承 width 屬性的值。 2、height 屬性設置元素的高度。這個屬性定義元素內容區的高度。 可能的值有:auto 自動高度。 length px、cm 等單位定義高度。% 百分比高度。inherit 規定應該從父元素繼承 height 屬性的值。 一、css背景圖片自適應屏幕代碼如下(通過background-image: ()引入圖片): .img{width: 100%;height: 100%;
background-position: center;
background-size:cover;background-repeat: no-repeat;}
background-image: url(圖片路徑);上述代碼就可以讓css圖片自適應不變形,這里的原理就是設置百分比。 二、css圖片自適應屏幕代碼如下(通img標簽引入圖片): img { height: auto; width: auto\9; width:100%; }
上述代碼就可以讓img圖片自適應div大小即屏幕大小。這里注意的是使用width:auto;即是寬度自動的意思。 本篇文章關于css怎么讓圖片自適應的介紹,希望對有需要的朋友有所幫助。 以上就是怎么用簡單的代碼實現圖片自適應的展示效果?(css代碼示例)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!