媒体对象
媒体对象是用于显示项目（通常是图像）及其旁边内容（通常是文本）的非常有用的组件。您可以在其中放置列表、网格，甚至其他媒体对象。
基础知识
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>
当我们身处梦境时，梦境感觉很真实。
我要即兴发挥了。听着，你应该了解我的一些事情……关于盗梦空间。一个想法就像病毒一样，具有弹性，极易传播。最小的想法种子也会生长。它可以成长为定义你或摧毁你。
在 flexbox 模式下，必须将 .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>
为什么做梦如此重要？
所以，一旦我们种下了植物，我们如何出去？希望你想到比朝我开枪更优雅的方法？一次踢腿。什么是踢腿？这就是踢腿，艾丽阿德妮。
什么是最顽强的寄生虫？细菌？病毒？肠虫？一个想法。顽强……极具传染性。一旦一个想法占据了大脑，就几乎不可能根除它。一个完全成形的想法 - 完全理解 - 就会根深蒂固；就在那里的某个地方。
在 flexbox 模式下，您可以改用 flexbox 辅助类 来获得相同的结果。.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>
我可以堆叠。
缩小浏览器宽度以查看我的堆叠。我会为狗粮表演杂技，但我不是狗。
嵌套媒体对象
通过将媒体对象嵌套到 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>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% |
当对象垂直堆叠时，媒体对象内图像的宽度。设置为“自动”以使用图像的自然宽度。 |
混合宏
我们使用这些混合宏来构建此组件的最终 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;添加样式以堆叠媒体对象的各个部分。将此应用于 section 元素，而不是容器。