Q:

How do I trim the bottom of an image?

I'm trying to cut off the bottom of a image so the next row of images an fit. I've tried to trim the bottom but it hasn't worked. I want to bottom edge to be in line with the image next to it.
Here is the current page: My Page
img.left {
 padding: 0 12px 0 0;
 height: auto;
 float: left;
width: 33.33%;
 }`

What it currently looks like

A:

You could put the images into a div and control the size of that div with height, width and overflow attributes in css. A bit like this; 
<div class="control" style="height: 600px;overflow: hidden; width: 100%;">
    <img class="big" src="images/35473299826_50c6ced1ec_k.jpg" alt="boy 
     with ferry">
    <img class="right" src="images/34628953174_408fac96c3_z.jpg" 
     alt="flowers">
    <img class="left" src="images/34702862403_ddf655f873_z.jpg" alt="One of 
     my pictures">
</div>

The output looks like this for me; enter image description here

