帶有可移動圖像的自適應Bootstrap傳送帶

Question

我現在陷入困境，現在不知道如何進行。 所以我做了一個固定高度的Bootstrap Carousel。 幻燈片內的圖像應緩慢下降。 我現在遇到的問題是，這在我的大屏幕上效果很好。 但是，當窗口變小時，圖片將不合框架。 此刻，我將圖片上移550px。 因此我可以將高度設置為100％，但是當我在過渡期間調整窗口大小時，過渡會變慢。

所以我認為也許可以transform: scale(x,y); 可以幫忙，但我不知道如何計算x和y 。 現在，我希望有人能提供一個很棒的主意，並能幫助我。

謝謝：]

https://jsfiddle.net/Lq9Lrsft/

的HTML

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Car Mega Bid - Partnerprogramm</title>
</head>
<body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div style="background-image: url(http://lorempixel.com/output/food-q-c-1280-853-1.jpg);" class="slider-size slider-img"></div>
            </div>
            <div class="item">
                <div style="background-image: url(http://lorempixel.com/output/animals-q-c-1280-852-3.jpg);" class="slider-size slider-img"></div>  
            </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- jQuery Easing plugin -->
    <script src="js/jquery.easing.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>
</body>
</html>

的CSS

.slider-size {
    height: 500px; /* This is the slider height */
}

.slider-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0;
}

.slide-img-movedown {
    background-position: center 100%;
    -webkit-transition: background-position 8s linear;
    -moz-transition: background-position 8s linear;
    -o-transition: background-position 8s linear;
    transition: background-position 8s linear;
}

的JavaScript

$(document).ready(function() {
    // Timing of sliding
    $(".carousel").carousel({
        interval: 10000
    });

    $(this).find('.item.active div').addClass("slide-img-movedown");
});

// Before sliding begins
$('#myCarousel').on('slide.bs.carousel', function(e) {
    $prevSlide = $(this).find('.item.active div');
})

// After slide transistion is completed
$('#myCarousel').on('slid.bs.carousel', function(e) {
    $prevSlide.removeClass("slide-img-movedown");
    $(this).find('.item.active div').addClass("slide-img-movedown");
})

Answer 1

通過向標簽添加.img響應類來創建響應圖像。 然后，圖像將很好地縮放到父元素。

Answer 2

JumbleGee ，在這里看小提琴 。
我有旋轉木馬從頂部來，在底部離開。
圖像在輪播中響應。
要使圖像滑入和滑出，請使用css，如代碼中所示。

調整大小以查看它如何為您工作。
這是一個完整尺寸的小提琴，如果更易於調整大小。

.carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

帶有可移動圖像的自適應Bootstrap傳送帶

問題描述

2 個解決方案

解決方案1
0 2015-06-12 21:33:37

解決方案2
0 已采納 2015-06-13 00:53:03

帶有可移動圖像的自適應Bootstrap傳送帶

問題描述

2 個解決方案

解決方案1 0 2015-06-12 21:33:37

解決方案2 0 已采納 2015-06-13 00:53:03

解決方案1
0 2015-06-12 21:33:37

解決方案2
0 已采納 2015-06-13 00:53:03