background-size,100%,content和cover的區別詳解
background-size中,100%和cover都是用於將圖片擴大或者縮放來適應整個容器。
1、引數:
background-size:contain; // 縮小圖片來適應元素的尺寸(保持畫素的長寬比);
background-size :cover; // 擴充套件圖片來填滿元素(保持畫素的長寬比);
background-size :100px 100px; // 調整圖片到指定大小;
background-size :50% 100%; // 調整圖片到指定大小,百分比相對於包含元素的尺寸。
2、瀏覽器相容寫法:
IE 和遨遊不支援;
Firefox 新增私有屬性 -moz-background-size 支援;
Safari 和 Chrome 新增私有屬性 -webkit-background-size 支援;
Opera 不支援 background-size 屬性,新增其私有屬性 -o-background-size 也不支援。
3、屬性詳解:
background-size:100% 100%;---按容器比例撐滿,圖片變形;
background-size:cover;---把背景圖片放大到適合元素容器的尺寸,圖片比例不變,但是要注意,超出容器的部分可能會裁掉。
當為百分比的時候,100%和100%,100%也會顯示不一樣的效果:
background-size:這個屬性有兩個值,第一個值為x軸方向的縮放比例或者px,第二個值為y軸方向的縮放比例或者px,如果只寫一個值,則第二個值預設為auto(根據圖片原來的比例,以及現有的寬度,來確定高度)
比方說:你有一張長寬比例為4:3的圖片,有一個width:100px;height:50px;的盒子(也就是長寬比例為2:1)。
background-size:100% 100%;這種方式設定完背景圖片的大小後,會完全鋪滿整個盒子,並且背景圖片的比例會因此改變為2:1
background-size:100%;這種方式設定的背景圖片的大小,x軸會和盒子一樣的寬,但是y軸由於預設為auto,根據上面的理論計算得背景圖片的高度為300px,但是盒子只有50px高,超出的部分隱藏,所以看兩種寫法的效果自然就不一樣啦。
第一種效果你一定會看到完整的背景圖片,但是有可能被擠壓(失去圖片原來的比例)
第二種效果你不一定能看到完整的圖片,但是圖片的比例沒有發生變化。
4、親自試一試效果:
相關推薦
ArrayList,Vector和LinkedList區別詳解
一、ArrayList ArrayList是一個可以處理變長陣列的型別,這裡不侷限於“數”組,ArrayList是一個泛型類,可以存放任意型別的物件。顧名思義,ArrayList是一個數組列表,因此其內部是使用一個數組來存放物件的,因為Object是一切型別的父類,因而ArrayList內部是有一個Obje
iOS 開發 公司開發者賬號,在多臺Mac上合作開發,共用一個賬號和證書--圖文詳解
參考 匯出證書申請的MAC裡的Xcode的開發者賬號 .developerprofile 匯出的開發者賬號檔案.developerprofile 匯出PKCS12既是.p12檔案 所拷貝的資料, .develop
MySQL存儲引擎中的MyISAM和InnoDB區別詳解
訪問 過程 包含 lte 處理機制 comm 用戶 isam log MyISAM是MySQL的默認數據庫引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的順序訪問方法)所改良。雖然性能極佳,但卻有一個缺點:不
MyISAM和InnoDB區別詳解
sam 是什麽 註意 高速 dump 在操作 必須 index 自己 MyISAM是MySQL的默認數據庫引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的順序訪問方法)所改良。雖然性能極佳,但卻有一個缺點:不
MySQL儲存引擎中的MyISAM和InnoDB區別詳解
在使用MySQL的過程中對MyISAM和InnoDB這兩個概念存在了些疑問,到底兩者引擎有何分別一直是存在我心中的疑問。為了解開這個謎題,搜尋了網路,找到了如下資訊: MyISAM是MySQL的預設資料庫引擎(5.5版之前),由早期的ISAM(Indexed Sequent
Statement、PreparedStatement和CallableStatement區別詳解
1.Statement、PreparedStatement和CallableStatement都是介面(interface)。 2.Statement繼承自Wrapper、PreparedStatement繼承自Statement、CallableStateme
MySQL儲存引擎:MyISAM和InnoDB區別詳解
1、MyISAM和InnoDB區別 1.1 區別 InnoDB MyISAM 構造 由.frm檔案、表空間(分為獨立表空間或者共享表空間)和日誌檔案(redo log)組成。 MyIS
【字串】字元陣列和字串區別詳解
C 語言中並不存在字串這個資料型別,而是使用字元陣列來儲存字串。那麼,字元陣列就一定是字串嗎? 對於這個問題,大多教科書中的回答是“是”。其實不然,字元陣列和字串是完全不相同的兩個概念,千萬不要混淆。分析如下所示的示例程式碼。 1 #include <stdio.h> 2 #incl
RHEL6啟動服務流程service和chkconfig區別詳解
在RHEL6系統中是利用service和chkconfig來管理服務的,而在RHEL7中則是用systemctl來管理服務,RHEL7利用systemctl管理服務大部分都是呼叫的以前RHEL6中的啟動指令碼,感覺就是把RHLE6裡的東西封裝了一下,沒多大實質的
C++中的 .h 和 .cpp 區別詳解
在C++程式設計過程中,隨著專案的越來越大,程式碼也會越來越多,並且難以管理和分析。於是,在C++中就要分出了頭(.h)檔案和實現(.cpp)檔案,並且也有了Package的概念。 對於以C起步,C#作為“母語”的我剛開始跟著導師學習C++對這方面還是感到很模糊。雖然我
mybatis中#{}和${}的區別詳解
一:在mybatis中最主要的一個特性就是動態sql: 1、 程式設計師通過直接編寫SQL語句,可以直接對SQL進行效能的優化; 2、 學習門檻低,學習成本低。只要有SQL基礎,就可以學習mybatis,而且很容易上手;
initialize方法和init區別詳解
原創帖子,轉載請註明出處:http://blog.csdn.net/sbvfhp/article/details/47857851 1、定義Father類 // // Father.m // // Created by 李建 on 15/8/22. //
檢視 主機IP 指定埠 是否開發的方法 ~~~ping和telnet 區別詳解!
1.總結: ICMP和IP協議是屬於同一層次(網路層)的,其報文也是封在IP報文中傳輸,而埠是傳輸層TCP/UDP協議的概念,所以Ping埠是不能成功的 今天發現PING SERVER不通,但是居然可以訪問SERVER,所以禁ping和埠能否訪問是兩個概念! pin
python基礎(8)python中is和==的區別詳解
# 前置知識點 當我們建立一個物件時,我們要知道它內部幹了些什麼 - 1.建立了一個隨機id,開闢了一片記憶體地址 - 2.自動聲明瞭這個物件的型別type - 3.給這個物件賦值value ## 小例子 ``` a = 1 print(id(1)) print(id(a)) print(ty
background-size,100%,content和cover的區別詳解
background-size中,100%和cover都是用於將圖片擴大或者縮放來適應整個容器。 1、引數: background-size:contain; // 縮小圖片來適應元素的尺寸(保持畫素的長寬比); background-size :cover
MVC,MVP 和 MVVM 的詳解
name one control ember 模式 hash 改名 主動性 主動 一、MVC MVC模式的意思是,軟件可以分成三個部分。 視圖(View):用戶界面。 控制器(Controller):業務邏輯 模型(Model):數據保存 各部分之間的通信方式如下
當同時安裝Python2和Python3後,如何兼容並切換使用詳解(比如pip使用)
err 完美解決 執行文件 class 需要 提示 改名 launcher 順序查找 由於歷史原因,Python有兩個大的版本分支,Python2和Python3,又由於一些庫只支持某個版本分支,所以需要在電腦上同時安裝Python2和Python3,因此如何讓兩個版
malloc和free函式詳解(轉載只是為了查閱方便,若侵權立刪)
malloc和free函式詳解 本文介紹malloc和free函式的內容。 在C中,對記憶體的管理是相當重要。下面開始介紹這兩個函式: 一、malloc()和free()的基本概念以及基本用法: 1、函式原型及說明: void *malloc(lon
spring定時器使用註解@Scheduled執行任務,fixedDelay、fixedRate和cron區別
註解@Scheduled 可以作為一個觸發源新增到一個方法中,例如,以下的方法將以一個固定延遲時間5秒鐘呼叫一次執行,這個週期是以上一個呼叫任務的 完成時間 為基準,在上一個任務完成之後,5s後再次執行:
nohup和&後臺運行,進程查看及終止 詳解
padding https ava logs awk nod 占用 定時 htm nohup 和重定向 功能一樣,可用於定時啟動 1.nohup 用途:不掛斷地運行命令。 語法:nohup Command [ Arg … ] [ & ] 無論是否將 noh