引导轮播宽度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像素。