Hier een afbeelding van wat niet goed loopt:
Op de home pagina toon ik de laatste 4 albums.
Geen probleem als ze allemaal landscape zijn.
Maar vanaf er 1 in portrait is, dan is de hoogte veel te groot.
Daarom zou ik gewoon graag hebben dat die de hoogte van de landscape heeft, en de overflow hidden is.
Mijn html:
<div class="row">
@foreach($recentAlbums as $album)
<div class="col-lg-3 col-sm-6 col-xs-6 noMarginPadding">
<a href="#galleryModal" class="gallery-box img">
<img class="img-responsive" src="http://www.example.org/bigThumbCopy/{{ $album->firstPhoto->foto_id }}/{{ $album->firstPhoto->foto_bigThumbCopy }}.jpg" >
</a>
</div>
@endforeach
</div>
Voor CSS gebruik in enkel het Grid van Bootstrap, en ook de img-responsive class.
Mijn css:
.gallery-box {
display:block;
position:relative;
margin:0 auto;
overflow:hidden
}
.gallery-box:hover img {
-webkit-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1)
}
.gallery-box img {
-webkit-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
}
.img-responsive {
max-width: 100%;
height: auto;
}
- De albums komen over de hele breedte van het scherm. 100%
- Per 25% komt er dus een afbeelding
- De afbeelding heeft een breedte van 100% en hoogte staat op auto. Daardoor is er geen vervorming, maar ze moeten ook allemaal dezelfde hoogte hebben.
- Je zou kunnen denken: stel een vaste hoogte in. Maar dan is het responsive gedoe van mijn afbeeldingen weg..
Iemand een oplossing?