媒體物件

媒體物件是超級有用的元件，用於顯示項目（通常是圖片），以及一些內容（通常是文字）。您可以在其中放入清單、格線，甚至其他媒體物件。

基礎知識

Foundation 的媒體物件將協助您建立這個常見的可重複模式，而且可以用好幾種不同的方式。媒體物件是一個容器，類別為 .media-object，以及兩個或三個區段，類別為 .media-object-section。

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Dreams feel real while we're in them.</h4>
    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
  </div>
</div>

當我們在夢中時，夢境感覺很真實。

我要即興演出。聽著，有些事情你應該了解我...關於植入。一個想法就像病毒，有韌性，極具傳染力。一個想法最小的種子都能成長。它可以成長到定義或毀滅你。

在彈性盒模式中，必須將類別 `.main-section` 加入到你的中央區段才能正確調整大小。

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section main-section">
    <h4>Dreams feel real while we're in them.</h4>
    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
  </div>
</div>

區段對齊

每個區段預設對齊到頂端，但個別區段也可以使用 .middle 和 .bottom 類別對齊到中間或底部。

在影片中觀看此部分

<div class="media-object">
  <div class="media-object-section middle">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-2.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Why is it so important to dream?</h4>
    <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
    <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
  </div>
  <div class="media-object-section bottom">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-3.jpg">
    </div>
  </div>
</div>

為什麼做夢如此重要？

所以，一旦我們製造出植物，我們要如何出去？希望你腦中想的是比對我頭部開槍更優雅的方式？踢。什麼是踢？這，艾莉安卓，就是踢。

什麼是最有韌性的寄生蟲？細菌？病毒？腸道蠕蟲？一個想法。有韌性...極具傳染力。一旦一個想法佔據了大腦，就幾乎不可能根除。一個完全形成的想法 - 完全理解 - 堅持；就在某個地方。

在彈性盒模式中，你可以使用彈性盒輔助類別來獲得相同的結果。.align-* 類別可以用於容器上，一次對齊每個子區段，或個別子區段可以用 .align-self-* 類別對齊。

<div class="media-object">
  <div class="media-object-section align-self-middle">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-2.jpg">
    </div>
  </div>
  <div class="media-object-section main-section">
    <h4>Why is it so important to dream?</h4>
    <p>So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.</p>
    <p>What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.</p>
  </div>
  <div class="media-object-section align-self-bottom">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-3.jpg">
    </div>
  </div>
</div>

在小螢幕上堆疊

透過加入 .stack-for-small 類別，你可以讓你的媒體物件具有回應性。影像將會取得 100% 的寬度，但這可以變更。

在影片中觀看此部分

<div class="media-object stack-for-small">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>I Can Stack.</h4>
    <p>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.</p>
  </div>
</div>

我可以堆疊。

縮小瀏覽器寬度來看看我堆疊。我可以為了狗零食表演特技，但我不是狗。

巢狀媒體物件

透過將媒體物件巢狀到媒體物件區段區段中，你可以輕鬆地縮排它。這對於註解字串來說非常棒。

<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src= "assets/img/media-object/avatar-1.jpg">
    </div>
  </div>
  <div class="media-object-section">
    <h4>I'm First!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.</p>
    <!-- Nested media object starts here -->
    <div class="media-object">
      <div class="media-object-section">
        <div class="thumbnail">
          <img src= "assets/img/media-object/avatar-2.jpg">
        </div>
      </div>
      <div class="media-object-section">
        <h4>I'm Second!</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.</p>
      </div>
    </div>
    <!-- And ends here -->
  </div>
</div>

我是第一個！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.

我是第二個！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.

Sass 參考

變數

這個元件的預設樣式可以使用這些 Sass 變數在專案的設定檔中自訂。

名稱	類型	預設值	說明
`$mediaobject-margin-bottom`	數字	`$global-margin`	媒體物件的底部邊距。
`$mediaobject-section-padding`	數字	`$global-padding`	媒體物件中各區塊的左右邊距。
`$mediaobject-image-width-stacked`	數字	`100%`	當物件垂直堆疊時，媒體物件中圖片的寬度。設為「auto」以使用圖片的原始寬度。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

media-object-container

@include media-object-container;

新增媒體物件容器的樣式。

media-object-section

@include media-object-section($padding);

新增媒體物件中各區塊的樣式。

參數	類型	預設值	說明
`$padding`	數字	`$mediaobject-section-padding`	各區塊之間的邊距。

media-object-stack

@include media-object-stack;

新增樣式以堆疊媒體物件的各區塊。套用至區塊元素，而非容器。