引導輪播寬度100％且響應迅速

Question

我的頁面上有一個旋轉木馬，但是當我將圖像的寬度設置為100％時，它們似乎無法正確地放置在橫幅中，它們看起來像是被拉長了。 我的圖片是2000像素乘550像素，我希望它們填充橫幅並做出響應以保持該比例。

目前它們是100％，但看起來有些拉長，太高了750px

我相信這是一個CSS問題？ 盡管我不確定引導代碼的哪一部分需要更改。 似乎有些東西迫使圖像像這樣調整大小。

 (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

圖片的自然尺寸為1650x650px。 當它們在我的顯示器上渲染時，它們的比例被縮放為1920x750px。 所以他們很努力:)嘗試使用更高分辨率的圖像。 寬度至少1920像素。