Fissa l’altezza e la larghezza di bootstrap carosello

Sto usando il bootstrap carosello, ma voglio un fisso di larghezza e altezza, in modo che tutte le mie immagini si adatta all’altezza e la larghezza. Per favore qualcuno può aiutarmi a raggiungere questo obiettivo. Ringrazio molto.

<div class="row">
                <div class="span8">
                    <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">

                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>First Thumbnail label</h4>

                                    <p>Deals you cannot miss.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Second Thumbnail label</h4>

                                    <p>Claim it now.</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
                                <div class="carousel-caption">
                                    <h4>Third Thumbnail label</h4>

                                    <p>Act fast. Only for today.</p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
                    </div>
                </div>
            </div>
perché si vuole risolvere questa giostra?
sì voglio il carosello di una determinata altezza e larghezza, e non importa qual è l’immagine che ho di assegnare ad esso, si adatta automaticamente l’immagine in base alla dimensione definita. Voglio coerente e dato che dovrò continuare a cambiare le immagini in modo che sarà più facile. Inoltre non mi permette di modificare l’altezza e la larghezza della giostra senza modificare la dimensione dell’immagine
easy way out, di quello che penso cadere l’idea di incorporare TB carosello per il tuo sito, trovare altri slider plugin… per TB Giostra è necessario personalizzare il css e js, che è il tempo di prendere il lavoro…
che cosa suggerisce?

OriginaleL’autore nishantvodoo | 2013-06-11

3 Replies
  1. 4

    Perché alcune immagini potrebbero avere meno di 500px di altezza, è meglio tenere l’auto-regolare, così mi consiglia il seguente:

    <div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">`
    Non è opportuno fare riferimento ad altri utenti nel tuo post. Se si dispone di una soluzione consigliata, non esitate a postare o a modifica di qualcun altro a rispondere quando si hanno abbastanza rep a farlo.
    Mi dispiace, è il mio primo post. Grazie per la gentile consulenza.

    OriginaleL’autore Gabriel Souto

  2. 0

    In styles.css di modifica del file altezza/auto di tutte le impostazioni desiderate. Per esempio, 500px:

    #myCarousel {
      height: auto;
      width: auto;
      overflow: hidden;
    }

    OriginaleL’autore Johnathan

  3. 0

    Per avere un costante flusso di immagini su diversi dispositivi, è necessario specificare la larghezza e l’altezza per ogni giostra elemento di immagine, per esempio qui nel mio esempio l’immagine sarebbe di prendere la larghezza, ma con un altezza di “400px” (è possibile specificare il valore personale, invece)

    <div class="item">
            <img src="image.jpg" style="width:100%; height: 400px;">
          </div>

    OriginaleL’autore y0ung0d

Lascia un commento