如何在响应式容器顶部对齐图像？

Question

我正在尝试将两个响应式容器连续对齐。其中一个图像内部设置为宽度：100% 和高度：自动。如何在其父响应容器顶部垂直对齐图像？

<div class="top-row">
  <figure class="product-image col-sm-6">
    <img src="http://rastenis.lt/coocoo/image/cache/catalog/Demo/Untitled.Oil%20on%20canvas.45x55%20cm.2011-570x600.JPG" class="img-r" alt="img">
  </figure>
  <article class="description col-sm-6">
    <h1 class="p-heading">ELEPHANTS ARE COMING BACK</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes </p>
  </article>
</div>

CSS

.top-row {
  width: 100%;
}
figure img {
  width: 100%;
  height: auto;
}

这是我的例子：https://jsfiddle.net/2sg209o0/

Answer 1

此处显示的示例代码：https://jsfiddle.net/2sg209o0/ 包含大部分您正在寻找的正确代码。要验证这一点，请随意将此 CSS 添加到相应的选择器中，以便您的 CSS 看起来像这样：

.top-row {
    width: 100%;
    border:1px dotted blue;
}
figure img {
    width: 100%;
    height: auto;
    border:1px dashed red;
}

如果您要右键单击图像并检查元素，您会看到图像的顶部和底部包含白色像素。正如您所问的，图像确实沿立即容器的顶部边缘对齐：

如何在其父响应容器的顶部垂直对齐图像？

但是，您似乎要求图像与其他内容一起在包含 div 的顶部“顶行”对齐。为此，您需要添加更多样式。也就是说，问题围绕浮点数和您对“Figure”元素的使用展开。

图形标签与许多其他标签一样，由浏览器提供预先存在的样式。其中一种样式是边距。阅读下面的代码块后，请随意单击下面的 JS fiddle 链接以获取实时示例中的最终代码。我已经为您添加了必要的样式并裁剪了图像（并将其放在 imgur 上）。随意定制您的出价；我不完全确定这里的最终目标是什么，除了某种形式的产品展示。

.top-row {
  width: 100%;
  border:1px dotted red; /* to show you top-row's boundaries */
}

figure{
  margin:0 1em 1em 0; /* override browser styles */
  width:50%;   /* give article some room in top-row */
  float:left;  /* floats are powerful tools for layouts and whatnot */
}

figure img {
  width: 100%;
  height: auto;
}

https://jsfiddle.net/pa04oxmt/

注意：你的图片可能会溢出它的容器，但我相信你知道如何解决这个问题:) 编辑：修复了拼写错误和诸如此类的问题

Answer 2

您的图片有问题。更改图像链接并再次检查。您的图像包含顶部的白色区域，逻辑上您的图像放置在父容器的顶部。最好的选择是裁剪我认为的图像。

Answer 3

我不太确定你想做什么。您是否帮助将 div 对齐在一行中或将图像垂直对齐在其自己的行中？如果是后者，你想使用vertical-align (http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)。