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