Responsive: Featured Page Image is Cropped on Mobile

I can’t seem to get this fixed.

The images are uploaded as the proper size and are fine until viewed on mobile where they are cropped. Does anyone know of any snippet that will fix this issue and/or possibly resize them accordingly? If I have to do this manually for each media dimension then so be it.

So far, I have this snippet.

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
/* hide the circular zoom, keep link */
.post .round-div {
border-color:   transparent;
}
.blog .round-div {
border-color: transparent;
}

I have no borders, but the image is cropped. I’m using a resizer and my own personal mobile device to check and I can’t fix this issue. Any help would be appreciated!