it-swarm.com.de

Bild im Bootstrap-Karussell ausdehnen und ausfüllen

Hallo Jungs, ich verwende bootstrap Karussell und habe Probleme mit der Bildhöhe und -breite. Obwohl ich es im img-Attribut definiere, wird es immer noch als ursprüngliche Auflösung angezeigt. Nachfolgend wird der Code verwendet, den ich verwende

<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>

Hier ist Demo davon.

Was muss ich tun, um das Bild unabhängig von seiner ursprünglichen Auflösung in einer bestimmten Höhe und Breite zu füllen.

11
Mike Ross

Sie können background-size: cover verwenden, während das <img>-Element für SEO- und semantische Zwecke ausgeblendet ist. Einzelne img-URLs werden beide Male verwendet, daher gibt es kein zusätzliches Laden, und Hintergrundgröße wird gut unterstützt (im Gegensatz zu object-fit, dem Unterstützung fehlt in IE, Edge und Android <4.4.4).

Fiddle Demo

HTML-Änderung:

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

CSS-Änderung:

.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;
}
9
Matija Mrkaic

Sie können die Höhe in css platzieren und hinzufügen! funktioniert wie ein Cover im Hintergrundformat eine Geige

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}

Sie definieren die Größe Ihrer Platzhalter in der URL, nicht in den HTML-Attributen der Elemente.

Schauen Sie sich auch die .img-responsive Klasse hier von Bootstrap an.

Update

Dies wurde in Bootstrap 4 Alpha und Beta in .img-fluid geändert

2
plushyObject

Dass Sie Breite in Platzhalter haben, sollte keine Rolle spielen, setzen Sie dies in Ihre CSS und es sollte funktionieren. Wenn es funktioniert, können Sie versuchen, entfernen! Wichtig.

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

.img-responsive in bootstrap setzt die Breite einfach auf 100%. Wenn also die ursprünglichen Proportionen des Bildes weniger als Karussellbreite sind, wird es nicht ausgefüllt.

2
Mathias Asberg

Stellen Sie sicher, dass Ihr Bild 100% der Containergröße einnimmt Verwenden Sie dazu Höhe: 100% und Breite: 100%.

Beschränken Sie dann die Größe, indem Sie die Werte des Containers auf die gewünschte Größe einstellen.

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

Ich hoffe das hilft.

2
jmag

Das Karussell wird so angepasst, dass es dem Standard des übergeordneten Elements entspricht, in Ihrem Fall .col-md-6 und .col-sm-6. Wenn Sie möchten, dass das Karussell 300 x 300 ist, legen Sie die Karussellklasse/-ID fest oder legen Sie die gewünschten Abmessungen fest.

Danach wendet bootstrap height: auto; auf Bilder im Karussell an, wodurch das height-Attribut überschrieben wird, das Sie im HTML-Code angegeben haben. Sie haben zwei Möglichkeiten, sich dem anzunehmen - entweder machen Sie height (und aus Gründen der Konsistenz auch width) eine Inline style am img-Tag, wenn Sie ihn im HTML-Format beibehalten möchten, oder geben Sie die Höhe auf Karussellbilder in Ihrer CSS-Datei an.

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

img-Tag mit der Eigenschaft "object-fit: cover"

.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>

Codepen

  • Herausgeber
  • Vollansicht
  • Version des Hintergrundelements

    1
    antelove

    Fügen Sie dies der CSS der Datei hinzu. Dies würde die Höhe und Breite des Bildes einschränken und somit ausrichten.

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

    0
    Shalinee SIngh

    wenn Sie in der Lage sind, einfaches JavaSkript zu verwenden, finden Sie hier die aktualisierte Geige https://jsfiddle.net/a1x1dnaa/2/

    was ich getan habe ist, das Bild als Hintergrund zu verwenden und den <img>-Tag zu entfernen.

    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();
        });
      });
    });
    

    dann können Sie einige Stile verwenden, damit das Bild das Div ausfüllt

    .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 
    }
    

    das sollte für Sie funktionieren.

    wenn Sie kein JavaScript verwenden möchten, können Sie das Bild einfach als Inline-Stil verwenden 

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

    und verwenden Sie das gleiche CSS wie oben.

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

    sie versuchen diese CSS und wenig Änderung in HTML. ich habe verschiedene image src zur besseren klärung verwendet.

    hier ist Geige aktualisiert

    0
    Amit Kumar

    Ich stand vor dem gleichen Problem . Was für mich funktionierte, war, anstatt img zu verwenden, div und background-image für css

    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. Fügen Sie diese Klasse in jedes Bildattribut hinzu

    class="img-responsive center-block"

    Zum Beispiel:

    <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />
    
    1. Fügen Sie diesen Stil hinzu

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

    Versuchen Sie, das Styling aus dem Tag img zu entfernen:

    <!--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

    Das können Sie mit den folgenden Stilen machen:

    .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%;
    }
    

    Durch die Einstellung von min-* auf die Bildattribute stellen wir sicher, dass mindestens 100% sowohl für width als auch für height verfügbar ist.

    JSFiddle

    0
    Suthan Bala