I’m using Foundation 5’s framework for my responsive site and I’m having a problem trying to vertically align my images within their div, especially when the user resizes their browser window. I’ve got two types of images; square images and portrait images.
I’m vertically aligning my image covers like so:
.cover {
height: 312px;
display: table-cell;
vertical-align: bottom;
background-color: #F0D5C0;
}
I’ve posted an example of the issue I’m having here:
http://codepen.io/realph/pen/trwKm
Basically, when you adjust the browser size, the square image elements lose their vertical-align altogether . I always want all images to stay aligned with to the bottom so the text block lines up, no matter what the size of the image.
I realise this is likely because of the height I’ve set on my .cover element above. Is there a way for me to automatically set a height that plays well with a responsive layout when resized?
Any help is appreciated. Thanks in advance!
