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

Question

所以我一直在寻找以下问题的解决方案:

bootstrap carousel 能够扩展图像以适应容器。这一切都很好，花花公子。当您有不同高度的图像时，问题就来了。

旋转木马将扩展其容器的高度以适应图像，可以通过以下方式固定:

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

现在，当我尝试偏移图像以便您可以看到中间而不是顶部时，问题就来了。我的意思是，因为所有图像的高度都不同，所以我需要移动 <img> 中的内容。标记到顶部。

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

所以 tl;dr:我如何在旋转木马中垂直移动图像 X 量。

这是我的代码:HTML:

<div class="container banner">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="img/carousel/Carousel.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/carousel/Carousel (2).jpg" alt="">
            </div>
            <div class="item">
                <img src="img/carousel/Carousel (3).jpg" alt="">
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel"
            data-slide="next">&rsaquo;</a>
    </div>
</div>

CSS

.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*/

}

编辑:

好吧，如果您执行以下操作:

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

你得到了类似解决方案的东西但是!根据图像的不同，它可能会变多或变少。理想情况下，图像中心必须位于轮播的中间。这是我当前的问题...

编辑 2:答案

因此以下内容将设法稍微偏移图像以使其垂直居中显示。

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

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

将此添加到 HTML 的末尾将允许对象在旋转木马上垂直“居中”，而与图像可能具有的高度无关。也不要忘记设置 <img> 的宽度根据原始帖子标记为 100%。

最后的评论:归功于@bleuscyther 的解决方案。

Answer 1

你可以固定图片的最大高度

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

    max-height :500px

}

如果您对 .carrousel-inner 有一个固定的宽度，也许在您想要将图像居中之后示例:

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

编辑

如果你真的想让图片适合使用你之前的 CSS + 这个:

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

}

还有一点jquery

在页面底部:

<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');