Bootstrap carousel ширина 100% и отзывчивый

Question

У меня есть карусель на моей странице, но когда я делаю изображения шириной 100%, они, похоже, не сидят должным образом внутри баннера, они кажутся растянутыми. Мои образы 2000px на 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%;

Я бы выяснить максимальный размер, который you'r готовы пойти, скажем 1920px, а затем использовать следующий CSS:

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

Это точно так же, как с помощью:

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

Независимо от вашего подхода, убедитесь, что вы планируете соотношение сторон и размер ваших объявлений, прежде чем писать какой-либо код.

Answer 2

Природные размеры изображений являются 1650x650px. Когда они отображаются на моем мониторе, они масштабируются до 1920x750 пикселей. Так что они растянуты :) Попробуйте использовать изображения с более высоким разрешением. По крайней мере, 1920 пикселей в ширину.