Css 在旋转木马上垂直偏移图像

因此，我一直在寻找以下问题的解决方案：

引导转盘能够扩展图像以适应容器的形状。这一切都很好。当您有不同高度的图像时，问题就会出现

转盘将扩展其容器的高度以适合图像，图像可以通过以下方式固定：

.container.banner .carousel-inner {
    height:500px;
}

现在，当我尝试偏移图像时，问题出现了，这样你就可以看到中间而不是顶部。我的意思是，由于所有图像的高度不同，我需要将

标记中的内容移向顶部

我已经找到一些人一些解决方案，描述使用背景图像，但为了这篇文章，我希望远离这种可能性

so tl；dr：如何在旋转木马内垂直移动图像X数量

这是我的密码： HTML:

编辑：

如果你做到以下几点：

.container.banner .carousel-inner {
    height:500px;
}
.container.banner .carousel-inner img{
    /*something to move the image*/
    /*top:5px; This doesnt work dynamically, percentage doesnt react*/

}

你得到了一个解决方案，但是！根据图像的不同，它可能会变化很多或很少。理想情况下，图像中心必须位于旋转木马的中间。这就是我现在的问题

编辑2：答案

因此，下面将设法在一定程度上偏移图像，使其看起来垂直居中

.container.banner .carousel-inner .item{
    position:relative;
    width:100%;
    bottom: 47%;
}
.container.banner .carousel-inner .item img{
    width:100%;
}

$（文档）.ready（函数（）{
$（“.container.banner.carousel-inner.item”）。每个（函数（索引）{
$（this.css（“页边空白顶部）”，-（$（this.height（））/4）+“px”）；
}
)});

将此添加到HTML的末尾将允许对象在旋转木马上垂直“居中”，与图像可能具有的高度无关。另外，不要忘记按照原始帖子将

标签的宽度设置为100%

---

最后一点意见是：@bleuscyther提供了解决方案。

您可以确定图像的最大高度

<script type="text/javascript">
$(document).ready(function () {
    $( ".container.banner .carousel-inner .item" ).each(function( index ) {

         $(this).css("margin-top",-(($(this).height())/4) + 'px');
    }
)});
</script>

如果你有一个固定的.carrousel内部宽度，你可能会想将图像居中 例如：

.container.banner .carousel-inner .item img{

    max-height :500px

}

编辑

如果您真的希望图像符合 使用以前的CSS+可以：

.container.banner .carousel-inner {
 width :900px
}
.container.banner .carousel-inner .item img{
 max-width: 900px;
 margin: 0 auto;
}

还有一点jquery

在页面底部：

img {
    position: absolute;
    top: 50%;
    left: 50%;

}

---

谢谢你的回答：）我对这种方法的问题是，你最终会在两边有白色的盒子。我一直在尝试只移动图像，使图像保持100%，但中间与旋转木马的中间对齐。即使这是一个可能的解决方案，但它并不完全适合我正在寻找的解决方案。我似乎无法让它工作。。。我得到的只是左边50%的图像偏移量。。。我可能做错了什么。但请检查此

.carousel-inner.item{top:0%；left:25%；height:50%；width:100%；margin:-15%0-25%；}.carousel-inner.item img{width:100%；}

它在某种程度上设法使大多数图像居中，但旋转木马动画中断。好吧，您缺少了一个括号：3。。。我用JavaScript将页边距顶部移动了25%，并设法使页边距几乎居中：）我将编辑我的文章以对此进行反思。不管怎样，祝你好运，德克斯特天才。

img {
    position: absolute;
    top: 50%;
    left: 50%;

}

<script>

$(document).ready(function () {
$( ".container.banner .carousel-inner .item img" ).each(function( index ) {

    X= $(this).width()
    Y= $(this).height()
    margin_left = -(X/2);
    margin_top = -(Y/2);

   $(this).css("margin-left",margin_left + 'px');
   $(this).css("margin-top",margin_top + 'px');
};

)};

</script>

 $(this).css("margin-left",-(($(this).width())/2) + 'px');