Question

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

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

旋转木马会扩展其容器的高度以适合图像，可以通过以下方式修复：

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

现在问题到了，当我尝试偏移图像时，你可以看到中间而不是顶部。我的意思是，由于所有图像都将具有不同的高度，我需要将<img>标签内的哪些图像移向顶部。

我发现有些人使用背景图片描述了一些解决方案，但为了这篇文章，我希望远离那个可能性。

so 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 + this：

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

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

1 个答案: