web-dev-qa-db-ja.com

Bootstrapカルーセルで画像を引き伸ばして塗りつぶします

こんにちは、私はbootstrapカルーサルを使用しており、画像の高さと幅に問題があります。 img属性で定義しても、元の解像度として表示されますが、使用しているコードは次のとおりです

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

これが デモ です。

元の解像度に関係なく、特定の高さと幅で画像を塗りつぶすにはどうすればよいですか？.

htmlcsstwitter-bootstraptwitter-bootstrap-3carousel
12
Mike Ross

SEOおよびセマンティックの目的で_background-size: cover_要素を隠したまま、_<img>_を使用できます。単一のimg urlが両方の時間で使用されるため、追加のロードはなく、 background-sizeは十分にサポートされています （_object-fit_とは異なり IE、Edge、およびAndroid <4.4.4）ではサポートされていません 。

Fiddle Demo

HTMLの変更：

_<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>
_

CSSの変更：

_.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  width: 300px;
  height: 350px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: hidden;
}
_
11
Matija Mrkaic

bootstrapはautoで高さをオーバーライドし、object-fit：cover;は背景サイズのカバーのように機能します a fiddle

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}
7
عارف بن الأزرق

プレースホルダーに幅があることは重要ではありません、これをcssに入れて動作するはずです。動作する場合は、！importantを削除してみてください。

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

.img-responsive in bootstrapは幅を100％に設定するだけなので、画像の元の比率がカルーセルの幅よりも小さい場合は塗りつぶされません。

4
Mathias Asberg

要素のHTML属性ではなく、URLでプレースホルダーのサイズを定義しています。

また、Bootstrapの.imgレスポンシブクラス here も確認してください。

更新

これはBootstrap 4 AlphaおよびBetaで.img-fluidに変更されました

2
plushyObject

画像がコンテナサイズの100％を占めるようにします。高さ：100％および幅：100％を使用します。

次に、コンテナの値を目的のサイズに設定して、サイズを制限します。

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

これがお役に立てば幸いです。

2
jmag

カルーセルは、親がデフォルトであるものに合うように成長します。これは、あなたの場合は.col-md-6および.col-sm-6。カルーセルを300x300にしたい場合は、カルーセルのクラス/ IDなどを必要なサイズにスタイルします。

その後、bootstrap apply height: auto;をカルーセル内の画像に追加します。これは、HTMLで指定したheight属性をオーバーライドします。あなたがそれに対処できる2つの方法-height（および一貫性のため、widthも）styleタグのインラインimgにするHTMLに保持するか、CSSファイルのカルーセル画像に高さを適用します。

body {
    margin: 10px;
}
.carousel, .carousel img {
  width: 300px;
}
.carousel img {
  height: 300px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/400x400">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x450">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>
2
Michael Coker

「object-fit：cover」プロパティを使用するimgタグ

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}            

.item {
    width: 100%;
    height: 100%;                
}

.item img {
    object-fit: cover;
/*
    object-fit: fill;
    object-fit: none;
    object-fit: contain;
    object-fit: scale-down;
*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div class="col-md-6 col-sm-6">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">

            <div class="item active" >
              <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" />            
            </div>

            <div class="item" >
              <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" />            
            </div>

            <div class="item" >
              <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" />            
            </div>

        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>

</div>

コードペン

  • 編集者
  • フルビュー

    • バックグラウンド.itemのバージョン

    1
    antelove

    これをファイルのcssに追加します。これにより、画像の高さと幅が制限され、位置合わせが行われます。

    .item img { max-height: 300px; max-width: 350px; }

    0
    Shalinee SIngh

    単純なjavaScriptを使用しても問題ない場合、更新されたフィドル https://jsfiddle.net/a1x1dnaa/2/

    私がやったことは、画像を背景として使用し、<img> 鬼ごっこ。

    jQuery(function(){
  var items = $('.item');
  items.each(function() {
    var item = $(this);
    img = item.find("img");
    img.each(function() {
        var thisImg = $(this);
        url = thisImg.attr('src');
        thisImg.parent().attr('style', 'background-image:url('+url+')');
        thisImg.remove();
    });
  });
});

    その後、いくつかのスタイルを使用して、画像がdivを塗りつぶすことができます

    .item {
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 200px; //you can use the height as you need 
}

    これはあなたのために働くはずです。

    javaScriptを使用したくない場合は、イメージをインラインスタイルとして使用できます。

    <div class="item" style="background-image: url(http://placehold.it/400x400)"></div>

    上記と同じCSSを使用します。

    0
    Lucian
    .item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}

    このCSSを試してみて、HTMLを少し変更します。より明確にするために、異なる画像srcを使用しました。

    ここで更新されたフィドル

    0
    Amit Kumar

    私は同じ問題に直面しました。私のために働いたのは、imgを使用する代わりに、cssにdivとbackground-imageを使用したことです

    HTML：

    <div class="carousel-inner">
  <div class="item active">
    <div class="carousel-img"></div>
  </div>
</div>

    CSS：

    .carousel-inner, .item {
    height: 100%;
}

.carousel-img {
    background-image: url('http://placehold.it/400x400');
    width: 100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
    0
    Char
    1. すべての画像属性にこのクラスを追加します

    class="img-responsive center-block"

    例えば：

    <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />

    1. このスタイルを追加

      .active img{
  width: 100%;
}
    0
    Gnanasekar S

    imgタグからスタイルを削除してみてください。

    <!--from-->

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
<!--to-->
<img src="http://placehold.it/350x350/aaa&text=Item 3"/>
    0
    NanoCellMusic

    次のスタイルでそれを行うことができます。

    .carousel-inner .item{
  width: 600px; /* Any width you want */
  height: 500px; /* Any width you want */
}
.carousel-inner .item img{
  min-width: 100%;
  min-height: 100%;
}

    min-*を画像属性に設定することにより、widthとheightの両方の少なくとも100%を確保します。

    更新 JSFiddle

    0
    Suthan Bala