Question

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

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

所以使用jQuery（如果可能的话，使用纯CSS）我想调整图像的位置以将其向上移动，以便顶部被裁掉而不是底部。

此外，当视口更改宽度时，它应保持响应。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

可以使用已知的高度容器，就像您的演示一样。我们可以将容器设置为void lwp_create(lwpfun callback, void *arg){ callback(arg); }，并将图像设置为position:relative，以及一些额外的设置，如下所示。

＆＃13;

position:absolute

＆＃13;

.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;
}

＆＃13;

<强> jsfiddle

Answer 2

如果您可以将图像用作div背景，则可以执行以下操作：

<强>选项1：

<强> HTML：

<div class="container" id="first"></div>
<div class="container" id="second"></div>

<强> CSS：

.container {
    height: 200px;
    width:100%;
    overflow: hidden;
    margin: 0 0 30px;
    border: solid;
    background-position: center center;
    background-repeat: no-repeat;
}
#first {
    background-image: url('http://placekitten.com/901/500/');
}
#second {
    background-image: url('http://placekitten.com/900/500/');
}

更新 - 选项2：

不使用图像作为背景。

<强> HTML：

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

<强> CSS：

.container {
    height: 200px;
    width:100%;
    overflow: hidden;
    margin: 0 0 30px;
    border: solid;
}
.centered {
    object-fit: none; 
    object-position: center; 
    width: 100%;
    height: inherit;
}

请检查此option1，option2

Answer 3

现在我要用：

$("img").each(function(){
    var hHeight = $(this).height()/2;
    $(this).css("top", - hHeight);
});

我很想看到其他解决方案，特别是如果它们更好的话。

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

3 个答案: