Question

我试图让jcarousel.js和bootstrap显示图像。我使用了connected carousel示例，但略微修改后使用了bootstrap css。

以下是代码：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Connected Carousels - jCarousel Examples</title>

        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <!-- Example assets -->
        <link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js?raw=1"></script>

        <script type="text/javascript" src="jcarousel.connected-carousels.js"></script>

    </head>
    <body>
        <div class="container">
        <div class="row">
            <div class="col-xs-7">

            <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage">
                        <ul>
                            <li><img class="img-responsive" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="600" height="400" alt=""></li>
                            <li><img class="img-responsive" src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="600" height="400" alt=""></li>
                            <li><img class="img-responsive" src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="600" height="400" alt=""></li>
                            <li><img class="img-responsive" src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="600" height="400" alt=""></li>
                            <li><img class="img-responsive" src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="600" height="400" alt=""></li>
                        </ul>
                    </div>
                    <p class="photo-credits">
                        Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                    </p>
                    <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#" class="prev prev-navigation">&lsaquo;</a>
                    <a href="#" class="next next-navigation">&rsaquo;</a>
                    <div class="carousel carousel-navigation">
                        <ul>
                            <li><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="50" height="50" alt=""></li>
                            <li><img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="50" height="50" alt=""></li>
                            <li><img src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="50" height="50" alt=""></li>
                            <li><img src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="50" height="50" alt=""></li>
                            <li><img src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="50" height="50" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>

            </div>
            <div class="col-xs-5">
                <h3> Hello World </h3>
            </div>
        </div>
        </div>

    </body>
</html>

您可以在jcarousel github上获得jcarousel.connected-carousels.css和jcarousel.connected-carousels.js。

图像是从网上随机抽取的，但所有图像都有不同的尺寸，只有舞台图像具有img-responsive类。但是，当查看页面时，所有图像似乎都以某种方式被切断：

第一张图片看起来不错，虽然我不确定，因为其他图片存在所有问题。
第二张图像显示相机在底部镜头处被切断
第三张图片显示人形小腿略微被切断
第四张和第五张照片都被严重切断了。

如果没有img-responsive，图像会以某种方式拉伸或切断。

如何保留图像比率并让它们适合舞台div？

Answer 1

定位div id和/或类并使用这样的样式

.somediv img{
    width:100%;
}

你可能遇到溢出问题但没有任何无法解决的问题。

使用bootstrap类img-responsive和jcarousel切断图像

1 个答案: