ブートストラップカルーセル幅100％と応答性

Question

私は私のページにカルーセルを持っていますが、画像の幅を100％にすると、バナー内に正しく座っていないように見えます。私の画像は2000pxで550pxです。私はそれらがバナーを埋めるようにして、この比率を維持して応答します。現時点で

は、彼らは100％ですが、彼らは、私は、これはCSSの問題であると考えてい750px

で延伸し、背が高すぎるように見えますか？私はブートストラップコードのどの部分を変更する必要があるのか​​分かりません。このように画像のサイズを強制するものがあるようです。あなたのイメージの

(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です。彼らは私のモニター上でレンダリングされるとき、彼らは1920x750pxにスケールされます。だから、彼らは街にいます:) 高解像度の画像を使用してみてください。幅は少なくとも1920ピクセルです。