3

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

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

轮播将扩展其容器的高度以适应图像，可以通过以下方式修复：

.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 的解决方案。

4

1 回答 1

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');
于 2013-03-05T04:48:53.340 回答