Question

我的页面上有一个旋转木马，但是当我将图像宽度设置为100％时，它们似乎没有正确地放在横幅内，它们看起来很紧张。我的图像是2000像素×550像素，我希望它们填满横幅并回应保持这个比例。

目前它们是100％，但它们似乎拉伸得太高，达到750px

我相信这是一个CSS问题？虽然我不确定我需要改变哪个部分的bootstrap代码。似乎有一些东西迫使图像像这样调整大小。

(function($) {
    $.fn.InitBanner = function(opts) {
        var config = $.extend({}, {
            'data' : []
        }, opts);

        function Init(obj) {
            if( config.data.length > 0 ) {
                AddItems(obj);   
            } else {
                console.error("Please specify the data json");   
            }
        }

        function AddItems(obj) {

            var htmlstring = '';
            var json = config.data;

            for( var i = 0; i < json.length; i++ ) {

                if( i === 0 ) htmlstring += '<div class="item active">';
                else htmlstring += '<div class="item">';

                htmlstring += '<a href="' + json[i].url + '"><img src="' + json[i].imageUrl + '"></a>';

                if( json[i].tags !== null ) {
                    for( var j = 0; j < json[i].tags.length; j++ ) {
                        if( json[i].tags[j].toLowerCase() === 'caption' ) {
                            htmlstring += '<div class="carousel-caption hidden-sm hidden-xs">';
                            htmlstring += '<h3>' + json[i].title + '</h3>';
                            htmlstring += '<p>' + json[i].leader + '</p>';
                            htmlstring += '</div>';

                            break;
                        }
                    }
                }

                htmlstring += '</div>';
            }

            obj.find('.carousel-inner').html(htmlstring);
        }

        // initialize every element
        this.each(function() {
            Init($(this));
        });

        return this;
    };
})(jQuery);

.row {
    margin-left: -15px;
    margin-right: -15px;
}
.carousel {
    position: relative;
}
.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    line-height: 1;
}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    max-width: 100%;
    height: auto;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}

@media not all, (-webkit-transform-3d)
.carousel-inner>.item {
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
    perspective: 1000;
}

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}
@media not all, (-webkit-transform-3d)
.carousel-inner>.item.next.left, .carousel-inner>.item.prev.right, .carousel-inner>.item.active {
    transform: translate3d(0, 0, 0);
    /* left: 0; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="carousel slide" id="bannerFrontPage">
        
        <div class="carousel-inner">
          <div class="item"><a href="https://www.gkunions.co.uk/freshers/"><img src="/asset/News/7328/Freshers-GKU-Webbanner.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item active"><a href="http://www.gkunions.co.uk/studenthub/"><img src="/asset/News/7328/hub.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="news/article/7328/Employability-Fair/"><img src="/asset/News/7328/Employability-fair-banner_GKU-Website.jpg?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="news/article/7328/Team-Medway/"><img src="/asset/News/7328/gku-banner-4.jpg?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="http://www.gkunions.co.uk/clickandcollect/"><img src="/asset/News/7328/cc2000.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
          <div class="item"><a href="http://www.gkunions.co.uk/pageassets/whoarewe/impactreport2015/2015_GKU_impact-report_Spread_web.pdf"><img src="/asset/News/7328/Impact-web-banner_gku.png?thumbnail_width=1650&amp;thumbnail_height=650&amp;resize_type=CropToFit"></a></div>
      </div>
        
        <a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"><span class="sr-only">Previous</span> </a> <a class="right carousel-control" data-slide="next" href="#bannerFrontPage"> <span class="sr-only">Next</span> </a>
    </div>
</div>

Answer 1

你不会为了预期目的而设计图像。找出该轮播的纵横比，然后围绕该纵横比设计图像。然后你可以使图像宽度：100％;或最大宽度：100％;

我想出你愿意去的最大尺寸，比如1920px，然后使用下面的CSS：

width: 1920px;
max-width: 100%;

这与使用：

完全相同

width: 100%;
max-width: 1920px;

无论您的方法是什么，请确保在编写任何代码之前规划广告素材的宽高比和尺寸。

Answer 2

图像的自然尺寸为1650x650像素。当它们在我的显示器上渲染时，它们被缩放到1920x750px。所以他们是拉伸:) 尝试使用更高分辨率的图像宽度至少为1920px。

Bootstrap轮播宽度100％并且反应灵敏

2 个答案: