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

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

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

Answer 2

你的图片有问题。更改图像 link 并再次检查。您的图像包含顶部白色区域，从逻辑上讲，您的图像位于父容器的顶部。最好的选择是裁剪我认为的图像。

Answer 3

此处显示的示例代码：https://jsfiddle.net/2sg209o0/ 有 大多数 您正在寻找的正确代码。要验证这一点，请随意将此 CSS 添加到其适当的选择器中，以便您的 css 看起来像这样：

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

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

How to vertically align image at the top of its parent responsive container ?

但是，您似乎要求图像与包含的 div、"top-row" 以及其他内容的顶部对齐。为此，您需要添加更多样式。也就是说，问题围绕着浮点数和您对 "Figure" 元素的使用。

与许多其他标签一样，图形标签从浏览器中获得了预先存在的样式。其中一种样式是边距。阅读下面的代码块后，请随时单击以下 JS fiddle link 以获取实时示例中的最终代码。我已经为您添加了必要的样式并裁剪了图像（并将其放在 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/

注意：您的图片可能会溢出其容器，但我相信您知道如何解决这个问题 :) 编辑：修复错别字什么的

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

How align image at the top of responsive container?

html

css

responsive