Ingrandisci e riempisci l'immagine nel carosello Bootstrap

Question

Ciao ragazzi sto usando il carosello bootstrap e ho qualche problema con l'altezza e la larghezza dell'immagine. Anche se i definisco nella img attribuiscono ancora visualizza come risoluzione originale, seguendo il codice è sto usando

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

Ecco demo di questo.

Cosa devo fare per riempire l'immagine in una certa altezza e larghezza indipendentemente dalla sua risoluzione originale.

Answer 1

Si sta definendo la dimensione dei segnaposti nell'URL, non negli attributi HTML per gli elementi.

Controllare anche la classe .img-responsive di Bootstrap here.

Aggiornamento

Questa è cambiato per .img-fluid in Bootstrap 4 Alfa e Beta

Answer 2

Che hai larghezza in segnaposto non dovrebbe importare, mettere questo nel CSS e dovrebbe funzionare, se funziona puoi provare a rimuovere! importante.

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

.img-reattiva nel bootstrap sarà sufficiente impostare la larghezza a 100%, Quindi, nel caso che l'immagine proporzioni originali sono meno larghezza giostra non riempirà fuori.

Answer 3

Fai in modo che l'immagine occupi il 100% delle dimensioni del contenitore. usando altezza: 100% e larghezza: 100%.

Quindi limitare la dimensione impostando i valori del contenitore sulla dimensione desiderata.

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

Spero che questo aiuti.

Answer 4

Il carosello crescerà per adattarsi all'impostazione predefinita del genitore, che nel tuo caso è .col-md-6 e .col-sm-6. Se si desidera che il carosello sia 300x300, modellare la classe/id del carousel o qualsiasi altra cosa che sia la dimensione desiderata.

Successivamente, il bootstrap applica height: auto; alle immagini nel carosello, che sostituiranno l'attributo height specificato in HTML. 2 modi per risolvere il problema: o inserisci lo height (e, per coerenza, width) un valore style incorporato nel tag img se desideri mantenerlo nell'HTML o applicare l'altezza alle immagini del carousel nel file 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>

Answer 5

È possibile inserire l'altezza in css e aggiungere importante perché bootstrap è prevalente la vostra altezza con auto, e object-fit: la copertura;! funzionerà come coperchio dimensioni sfondo a fiddle

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

Answer 6

È possibile utilizzare background-size: cover, pur avendo nascosto <img> elemento per scopi semantiche SEO e.Il singolo img url viene utilizzato entrambe le volte, quindi non c'è nessun caricamento aggiuntivo e background-size is well supported (a differenza di lacks support in IE, Edge e Android < 4.4.4).

Fiddle Demo

cambiamento HTML: il cambiamento

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

Answer 7

Aggiungi questo al css del file. Ciò limiterebbe l'altezza e la larghezza dell'immagine e quindi l'allineerà.

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

Answer 8

se va bene per l'uso semplice javascript, qui è il violino aggiornato https://jsfiddle.net/a1x1dnaa/2/

quello che ho fatto è, usato l'immagine come sfondo e rimosso il tag <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(); 
    }); 
    }); 
}); 

quindi è possibile utilizzare alcuni stili per rendere l'immagine riempire il 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 
} 

questo dovrebbe funzionare per voi.

se non si desidera utilizzare JavaScript, è possibile utilizzare semplicemente l'immagine come inline-stile

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

e utilizzare lo stesso CSS come sopra.

Answer 9

1. Aggiungere questa classe in ogni attributo immagine

class="img-responsive center-block"

Ad esempio:

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

2. Aggiungi questo stile

   .active img{ 
       width: 100%; 
   } 
   

Answer 10

Potete farlo con i seguenti stili:

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

Impostando min-* per gli attributi di immagine, stiamo facendo in modo di avere almeno 100% sia width e height.

Updated JSFiddle

Answer 11

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

di provare questo css e piccolo cambiamento in html. Ho usato immagini diverse per migliorare la clearificazione.

here is updated fiddle