javascript - 使用 jQuery 或 CSS 将 100% 宽度的图像调整为垂直居中？

Question

基本上我有一个包含 <img> 的固定大小的 div标签。我无法更改结构。

通常这些图像比容器大得多，因为它们保持 100% 宽度并填充框。大多数情况下，这会导致过多的图像显示在顶部，而没有裁剪到图像的中心。

因此，我想使用 jQuery(或纯 CSS，如果可能)调整图像的位置以将其向上移动，以便裁剪掉顶部而不是底部。

此外，当视口(viewport)改变宽度时，这应该保持响应。

Here is a fiddle

.container {
    height: 200px;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px;
}

<div class="container">
    <img src="http://placekitten.com/900/500/">
</div>
<div class="container">
    <img src="http://placekitten.com/901/500/">
</div>

Answer 1

使用已知高度的容器是可行的，就像您的演示一样。我们可以将容器设置为 position:relative，将图像设置为 position:absolute，再加上一些额外的设置，如下所示。

.container {
    height: 200px;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px;
    position: relative;
}
.container img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    height: auto;
}

<div class="container">
    <img src="http://placekitten.com/900/500/">
</div>
<div class="container">
    <img src="http://placekitten.com/901/500/">
</div>

jsfiddle