#image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
 #image { background: (high.png); }
}

background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
 url(icon1x.jpg) 1x,
 url(icon2x.jpg) 2x
);
background-image: image-set(
 url(icon1x.jpg) 1x,
 url(icon2x.jpg) 2x
);

<img alt="" src="banner.jpg" srcset="banner-HD.jpeg 2x, banner-phone.jpg 640w, banner-phone-HD.jpg 640w 2x">

響應(yīng)式設(shè)計(RWD)中，令大家最頭痛的問題的是圖片的自適應(yīng)處理問題。往往我采取的處理方式是給圖片的容器設(shè)置一個尺寸，然后給圖片設(shè)置下面的代碼：

img {
    max-width: 100%;
    height: auto;
}

但往往需要處理的不止于此。你可能想要讓圖像長寬比例來填充他的整個容器，想重新定位他的中心位置。或者，如果你想按長寬比例響應(yīng)式調(diào)整iframe，你可能會真正地碰到麻煩。當(dāng)然也有修復(fù)的方法，但所有人都在說：

媒體調(diào)整的行為將會失控！

是的，現(xiàn)在我們要解決這個問題。CSS標(biāo)準(zhǔn)提出屬性object-fit和object-position可以解決這樣的問題。

Chris Mills在2011年發(fā)表了一篇The CSS3 object-fit and object-position properties，文章中詳細(xì)介紹了object-fit和object-position屬性的使用。今天我們也將深入學(xué)習(xí)和了解這兩個屬性的具體使用。

功能簡介

在CSS中，替換元素(replaced elements)，如<img>和<video>元素一直存在長寬比的控制問題，特別是在響應(yīng)式設(shè)計中，如何在不同設(shè)備，不同分辨率下對這些元素的長寬進(jìn)行響應(yīng)。例如，您可能想以圖片的正確尺寸，不想扭曲圖像，也不想失去圖像的長寬比例，讓圖片占據(jù)一定的空間。按照長寬比例調(diào)整和縮略圖像的畫面比擠壓和拉伸圖像是一個更優(yōu)雅的解決方案。

在CSS3中我們可以使用object-fit和object-position來處理。“object-fit”屬性指定了替換元素的內(nèi)容應(yīng)該如何使用他的寬度和高度來填充其容器。“object-position”屬性指定了替換元素在容器中的對齊方式。

語法和取值說明

欲要了解這兩個屬性的具體使用，我們先從其語法和屬性值作用入手。

object-fit語法

object-fit屬性的語法非常的簡單：

object-fit: fill | contain | cover | none | scale-down

object-fit取值說明

object-fit主要適合于替換元素，比如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認(rèn)值為fill。object-fill取值的說明如下：

• fill: 此值為object-fit的默認(rèn)值，替換內(nèi)容的大小被設(shè)置為填充元素的內(nèi)容框，也就是說，元素的內(nèi)容擴(kuò)大到完全填充容器的外形尺寸，即使這打破其內(nèi)在的寬高比。
• contain：替換元素內(nèi)容大小保持長寬比例填充元素內(nèi)容容器，其具體對象大小被解析為一個包含元素的寬度和高度。也就是說，如果你在替換元素上設(shè)置一個明確的高度和寬度，此值將導(dǎo)致內(nèi)容大小完全在固定的比例顯示，但仍在元素尺寸內(nèi)顯示。
• cover：替換元素內(nèi)容大小保持長寬比例填充元素內(nèi)容容器，其具體對象大小被解析為覆蓋整個元素的寬度和高度。也就是說，替換元素內(nèi)容大小保持長寬比，但改變寬度和高度，以便完全覆蓋內(nèi)容元素。
• none：替換元素內(nèi)容不調(diào)整大小以適應(yīng)內(nèi)部元素的容器，內(nèi)容完全忽略設(shè)置在元素上的任何高度和權(quán)重，并且仍在元素尺寸內(nèi)顯示。
• scale-down：當(dāng)內(nèi)容大小設(shè)置了non或contain，將導(dǎo)致具體對象變得更小。

來看官網(wǎng)提供的一個效果示意圖：

object-position語法

object-position的語法和CSS中的background-position非常的類似：

object-position: <position>

其主要適用于替換元素，如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認(rèn)值為“50% 50%”(center)。

object-position屬性決定了它的盒子里面替換元素的對齊方式。其取值和CSS中background-position屬性取值一樣。如下所示：

img {
  height: 100px;
  width: 100px;
  object-fit: contain;
  object-position: top 75%;
}

瀏覽器兼容性

object-fit和object-position屬性到目前為止，瀏覽器的兼容并不很好，支持的瀏覽器僅有Opera12.1(還需要添加其私有前綴-o-)和Opera Mobile11.5~12.1。不過值得慶幸的是Chrome32+將會支持這兩個屬性。其詳細(xì)的兼容說明如下所示：

在寫本教程的時候，你可以使用Google Chrome Canary瀏覽器來進(jìn)行測試。（在下文中的用例，使用的是Google Chrome Canary33進(jìn)行的效果測試）。

object-fit的應(yīng)用

在任何替換元素上都可以使用object-fit屬性。前面主要介紹了object-fit各屬性的理論知識，接下來，使用簡單的用例來加以說明各屬性值的使用與效果。

為了更好的說明效果，我們在這里引入一張簡單的圖像：

HTML結(jié)構(gòu)

結(jié)構(gòu)很簡單，就是一張簡單的圖片：

<div>
    <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1312/object-test.jpg" alt="Object-fit Example" />
</div>

CSS樣式

簡單地添加一點樣式：

div {
  margin: 20px;
  text-align: center;
}
img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
}

其默認(rèn)效果如下所示：

fill效果

在原始效果的基礎(chǔ)上，我們先來添加object-fit屬性的fill效果：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:fill;
}

效果如下：

從效果上看，和默認(rèn)的效果沒有兩樣。

contain效果

把object-fill值換成contain，如下所示：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:contain;
}

其效果如下所示：

當(dāng)object-fit取值為contain時，效果有明顯的變化。按一定的長寬比例進(jìn)行了圖片的縮放。

cover效果

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:cover;
}

效果如下：

當(dāng)object-fit取值為cover時，圖片以原中心為基點，向外擴(kuò)展，超出容器大小部分會自動截取。

none效果

img {
  width: 300px;
  height: 350px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:none;
}

效果如下：

取值為none時，圖像以原點向外擴(kuò)展。

scale-down效果

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:scale-down;
}

效果如下：

上在演示了object-fit屬性在不同取值下的效果。為了更好地看出他們之前的變化，我們通過幾個不同的gif圖來動態(tài)演示他們其中的不一致之處。

fill動畫演示

圖片一直會填充整個替換元素，并且圖片按一定的比例對畫面進(jìn)行調(diào)整。

contain動畫演示

圖片按一定的比例進(jìn)行畫面的調(diào)整，會出現(xiàn)圖片水平和垂直方向留白現(xiàn)象。極其類似于background-size屬性取為contain時的效果。

none動畫演示

當(dāng)圖片尺寸設(shè)置得比原始尺寸小時，圖片原點不動，超出部分會自動截取；當(dāng)圖片尺寸設(shè)置比原始尺寸大時，四周會留白。

cover動畫演示

圖片會一直填充，超出部分會自動截取。極其類似于background-size屬性中取值為cover的效果。

scale-down的動畫演示

有點類似于object-fit取值為contain時效果。

object-position應(yīng)用

前面說過，object-position類似于background-position,并且取值可以和background-position取值一樣。不過object-position主要用于調(diào)整替換元素的對齊方式。我們簡單地來看一個示例：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:contain;
  object-position: 10px 10px;
}

效果如下：

為了更好地了解object-position的使用，我們同樣來看一個動畫演示效果圖：

mg標(biāo)簽的應(yīng)用場景

我們平時在瀏覽網(wǎng)站的過程中如果只有文字的話難免會有些太單調(diào)了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網(wǎng)頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進(jìn)行點綴，這就用到了今天我要教給大家的圖像標(biāo)簽img。

img標(biāo)簽的組成

src：圖片的路徑 這個是必須要有的

title：當(dāng)我們把鼠標(biāo)移動到圖片上展示的文本內(nèi)容

alt：當(dāng)圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內(nèi)容

width：設(shè)置圖片的寬度

height：設(shè)置圖片的高度

img標(biāo)簽的使用

以上就是img圖片標(biāo)簽的簡單應(yīng)用