Alignment issues with responsive images

Could somebody help me with an alignment issue. If you take a look at my shared site you will see the problem…

I have a matrix of squared images and text on my home page and on my work page. The boxes are set at different percentage widths so that I can create a random layout that fits edge to edge within the wrapper div that is containing them.

I originally had the images as background images, which worked perfectly for what i was trying to achieve with the layout, but I had no control over image cropping/scaling which was determined by the div box shape (in relation to the browser proportions).

I’ve since updated this to use images within a div block that are set to 100% width and auto height. I’ve made sure all the elements are set to the same height in photoshop, so they all sit aligned with each other in the grid. The problem I have is the design has several div blocks with text in that need to sit aligned with the images.

This is my first web flow site so I’m learning as I go. As a quick fix I created coloured jpgs in photoshop the same height as the other images, but on iPad landscape the text is overflowing out of the image area.

I’m sure there is a very simple fix for this - if someone could help a learner out I’d very much appreciate it.

Thanks in advance