Bootstrap 圖像

目標

在本教學中，我們將討論三個 Bootstrap 3 的 class 來為圖像添加樣式。同時，我們也會討論有關 Bootstrap 3 為回應式圖像所提供的內容。

一般的樣式

在我們討論 Bootstrap 3 提供的定義圖像樣式的特殊的 class 之前，我們將看到 Bootstrap 3 提供的定義圖像的一般的樣式。

img {
  border: 0;
}

這是在 Bootstrap 3 的 CSS 中找到的第一個為圖像定義的 CSS 規則，當圖像呈現時用來移除邊框。

然後，在列印的媒體查詢內，規定了這些規則。

 img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }

page-break-inside: avoid; 避免圖像內的分頁符。

max-width: 100% !important; 為圖像定義的樣式是顯而易見的。這裏它用於確定即使圖像的寬度超出了容器，它也能被限制在容器內顯示。它與 !important 一起使用，來覆蓋其他任何破壞這種樣式的樣式。有時候，開發人員想讓樣式更好地支持移動設備上圖像的友好呈現，會特別使用這兩個規則。

這裏還有另一個用於圖像的規則

img {
  vertical-align: middle;
}

由於這條規則，一個圖像會在 div 或者其他元素內垂直居中。如下面實例所示。

請注意，如果需要根據上下文垂直居中圖像，則需要額外的樣式。

特殊的樣式

Bootstrap 3 提供了三個 class 用於呈現帶有明確樣式的圖像。

img-rounded

您可以使用這個 class 來呈現帶有圓角的圖像。為了實現這點，Bootstrap 提供了 img-rounded class。該 class 的樣式如下定義

.img-rounded {
  border-radius: 6px;
}

所以，它把 border-radius 屬性設置為帶有 6 像素值，用來定義相關圖像的圓角。下麵的實例演示了兩個相同的圖像，第一個圖像不帶 img-rounded class，第二個圖像帶有 img-rounded class。請注意，第二個圖像是圓角的。您可以 點擊這裏，線上查看實例。

img-thumbnail

這是另一個 Bootstrap 3 的 CSS class，它給圖像添加了一個縮略圖。該 class 的代碼顯示如下

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

下麵是一個使用了該 class 的實例。您可以 點擊這裏，查看線上演示。

img-circle

通過使用 border-radius 屬性，Bootstrap 3 創建了一個以圓形呈現的圖像。img-circle class 的 CSS 代碼如下

.img-circle {
  border-radius: 50%;
}

點擊這裏，線上查看實例。下麵是截屏和代碼。

回應式圖像

Bootstrap 3 沒有提供立即可用的回應式圖像。您必須添加 img-responsive class 到圖像上讓它具有回應性。該 class 的 CSS 代碼如下。

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

它定義了圖像必須顯示為塊級元素，高度將與圖像高度相同，圖像的最大寬度是 100%，來限制圖像根據它所在的設備來呈現。

如需讓圖像默認具有回應特性，您可以添加這些 CSS 代碼到 img{ }。

使用該 class 的實例如下。您可以 點擊這裏，線上查看演示。

這個向圖像添加回應特性的方法有局限性。

分別在大螢幕設備和移動設備（螢幕尺寸更小，可能會引發性能問題）上加載同樣大的高解析度的圖像。由於流覽器會在 CSS 和 JS 加載之前預先加載圖像，在一個低速的網路連接中，也會引發性能問題。試想一下，您有一個大圖像和其內的一個特定對象，當您在移動設備上查看圖像時，圖像會被縮小到一個較小的版本，這樣圖像看起來就會很小，簡稱 藝術指導 問題。

開發人員已經想出克服這些限制的解決方案。我們將看到一個 Marc Grabanski 和 Christopher Schmitt 使用 HiSRC 的實例。這是一個會自動創建圖像的低、中、高解析度版本的 Jquery 插件，呈現的版本取決於顯示圖像設備的解析度和帶寬。

在我們後邊的 回應式圖像教程 中，我們將詳細討論所有這些方法。

點擊這裏，線上查看演示。代碼如下：