使用引导类 img-responsive 和 jcarousel 截断图像答案

【问题标题】：Images are cut off using bootstrap class img-responsive and jcarousel使用引导类 img-responsive 和 jcarousel 截断图像
【发布时间】：2014-08-07 15:05:12
【问题描述】：

我正在尝试让 jcarousel.js 和引导程序显示图像。我正在使用connected carousel 示例，但稍作修改以使用引导 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？

【问题讨论】：

标签： javascript html twitter-bootstrap-3 jcarousel aspect-ratio

【解决方案1】：

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

.somediv img{
    width:100%;
}

您可能会遇到溢出问题，但没有什么是无法修复的。

【讨论】：