Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Allineamento altezza immagini dentro colonne bootstrap

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    77

    Allineamento altezza immagini dentro colonne bootstrap

    Ciao a tutti!

    Ho delle colonne bootstrap in cui metto dentro delle foto ma essendo le foto non delle stesse dimensioni si viene a creare un dislivello tra loro che vorrei evitare.

    codice:
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6>
                <!-- IMMAGINE 1 -->
                <img src="#" alt="" class="img-responsive>
            </div>
            <div class="col-md-6>
                <div class="row">
                    <div class="col-md-12>
                        <!-- IMMAGINE 2 -->
                        <img src="#" alt="" class="img-responsive>
                    </div>
                    <div class="col-md-12>
                         <!-- IMMAGINE 3 -->
                        <img src="#" alt="" class="img-responsive>
                    </div>
                </div>
            </div>
        </div>
    </div>
    Alle immagini ho dato la classe img-responsive

    codice:
    display: block;
    max-width: 100%;
    height: auto;
    Nel mio caso devo metter
    codice:
    width: 100%;
    perch� l'immagine deve occupare tutta la colonna e d'altro canto avevo messo
    codice:
    max-height: 400px; // per esempio
    .

    A risoluzione desktop le immagini sono allineate ma basta passare ad un'altra risoluzione per vedere che tornano disallineate perch� ognuna segue la propria aspect ratio.

    Avevo provato con una height specifica ma perdono responsivit� e vengono strechate.

    Non riesco a trovare una soluzione e mi viene il dubbio che non sia fattibile perch� o fisso una dimensione (width o height) e l'altra si comporta di conseguenza ma le immagini non occupano tutta la colonna oppure le fisso ma perdo l'aspect ratio.

    Mi sembra strano che non ci sia una soluzione ad un problema penso cosi molto comune.

    Suggerimenti?

    Grazie!
    Ultima modifica di Floky; 09-09-2017 a 16:02

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,410
    Ciao, se vuoi avere le immagino proporizionate e tutte uguali, per forza di cose dovranno avere le stesse dimensioni o risulteranno stirate.
    Se il dislivello di cui parli e' per la colonna che le contiene si può ovviare diversamente , qui puoi vedere come allinerare in altezza ad esempio colonne via css (cosa che è stata ora introdotta nativamente con bootstrap 4).

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    77
    Ciao, si alla fine mi sono state date immagini con le giuste dimensioni e ora risultano allineate. Ho notato che per� se pur alcune immagini avendo stessa altezza ma essendo inserite in colonne bootstrap diverse (una in col-md-5 e l'altra in col-md-7 per esempio), avendo le immagini classe img-responsive, il risultato � ancora un disallineamento ma penso sia proprio la natura della classe img-responsive:

    le img hanno stessa altezza ma dovendo occupare larghezze diverse (colonne bootstrap) per mantenere l'aspect ratio le altezze diventano diverse.

    Giusto?

    Quindi in teoria mi dovrebbero essere passate immagini con larghezza minima di quella della colonna bootstrap in cui andr� inserita dico bene?

    Come escamotage mi � stato suggerito di fare delle colonne custom di cui ho calcolato le % in questo modo:

    Se ad esempio le due immagine affiancate occupavano tutta la larghezza della view ho preso la larghezza della prima immagine e fatto:

    larghezza immagine 1 / (larghezza img 1 + larghezza img 2) --> moltiplicato per 100 ottengo la % da applicare alla prima colonna.

    Stessa cosa per la seconda immagine:

    larghezza immagine 2 / (larghezza img 1 + larghezza img 2) --> moltiplicato per 100 ottengo la % da applicare alla seconda colonna.


    Il metodo funziona ma con il risultato che le img dovendo occupare una larghezza maggiore si ingrandiscono (mantenendo per� il rapporto giusto). Nel mio caso per� mi va bene, non sono state ingrandite poi cosi tanto quindi la qualit� non � inficiata.

    Cmq la cosa migliore � che vengono date img gi� delle giuste dimensioni pensate per colonne, nel senso che se sai che un img dovr� essere messa dento una colonna ad esempio di 7 devi darmi un img con una larghezza minima di una colonna di 7, giusto?

    Saluti.

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,410
    Le colonne di bootstrap sono fatte appositamente per mantenere in proporzione a ellineati i contenuti(e modificare la disposizione in caso di responsive appunto). Se utilizze le calssi dedicate alle immagini anche queste ovviamente si adatteranno. Quindi per evitare questo problema (se non è il caso tuo di utilizzo), potresti ovviare non usando le classi dedicate alle immagini e usare delle tue regole custom css. Per fare un esempio di base, partendo dal presupposto (esempio) che hai delle immagini con larghezza massima (originale) di 600px, potresti dare un
    codice:
    max-width:600px; height:auto;
    In questo modo si dovrebbero adattare al contenitore ma non più di 600p in laghezza senza l'effetto di stiratura. Ovviamente l'altezza sarà variabile alla larghezza per mantenere la proporzione.
    Un altro trucco potrebbe essere l'inserimento del tag immagine all'interno di un div con altezza masssima di N pixel con overflow-y:hidden. Avresti quindi un'immagine larga quanto il contenitore ma mai piu' alta di N pixel.
    Una cosa tipo questo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.