如何在CLIP上对图像进行y中心，但如果它小于其容器，则让它保持顶部对齐？

Question

我有一个容纳图像的容器。图像水平填充容器，容器响应页面大小。见小提琴：

im html

<div id="container">
  <img src="http://silberschauer.de/img/pre/045.jpg" />
</div>

在css中

#container {position:absolute;top:1em;left:1em;bottom:2em;
 width:30%;background:#0f0;overflow:hidden;}
#container img {width:100%;}

https://jsfiddle.net/t4um60k1/8/

如果（并且只是）容器在y轴上比使用css的图像更小，是否可以使图像剪辑顶部和底部相等？

修改 如果您的解决方案在任何情况下都在图像上方提供绿色区域，您就不明白这个问题。

Answer 1

  

如果容器在v轴上的尺寸小于带有css的图像，是否可以使图像剪辑顶部和底部保持顶部对齐？

是的，这可以通过CSS整齐有效地完成。 Flexbox非常适合这类事情。

不需要JS。没有对HTML进行任何更改。

将此添加到您的CSS：

#container {
    display: flex;                   /* new */
    flex-direction: column;          /* new */
    justify-content: space-between;  /* new */
    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 2em;
    width: 30%;
    background: #0f0;
    overflow: hidden;
}

#container::before, #container::after {
    content: '';
}

#container img {
    width: 100%;
    flex-shrink: 0;
}

https://jsfiddle.net/t4um60k1/10/

<强> 解释

我们使用flexbox将图像对齐垂直轴（flex-direction: column）。

然后我们告诉flex容器任何子元素（也称为flex项）将对齐为space-between。

使用justify-content: space-between，弹性项目均匀分布，第一个项目在容器的一个边缘对齐，最后一个项目在相对边缘对齐。在这种情况下，因为我们处于column方向，我们正在谈论顶部和底部边缘。

为了确保图像保持在中间，我们使用伪元素在每一端创建“幻影”弹性项目。

但是，当justify-content: center以较少的麻烦完成工作时，为什么要采取这些额外的步骤来使图像居中？

因为问题的第二个要求是当图像超过容器的高度时图像必须是顶部对齐的。

使用justify-content: center，图片将始终保持居中。

但根据space-between的规则，如果弹性项目溢出容器，space-between会切换到flex-start，这会将图像与顶部对齐（下面有更多详细信息）。

最后，由于弹性项目通常具有弹性，因此flex-shrink: 0会应用于图像，以确保其不会缩小原始尺寸。

从space-between切换到flex-start

来自规范：

  

空间之间

     

Flex项目均匀分布在该行中。 如果剩下的话   自由空间是负的，或者只有一个弹性项目   该行，此值与flex-start相同。

     

中心

     

Flex项目朝向线条的中心打包。 ... 如果剩下的话   自由空间是负的，弹性项目将同时溢出   方向。

     

（强调我的）

     

来源：https://www.w3.org/TR/css-flexbox-1/#justify-content-property

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 2

您只需为图片添加一些css技巧即可。它不是现代的方式，但它有效。

#container img {
  width:100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

jsfiddle

当容器变得比v轴中的图像小时，图像是对齐顶部。