Hide overflow in images

Overflow_hidden

/*
Applying overflow: hidden allows you to clear the float from the previous element and keep the content running within the containers as the containers resize to fit a new screen environment. This trick is extremely useful for one of the common problems we face when coding with float based layouts, when the wrapper container doesn’t expand to the height of the child floating elements.

But overflow: hidden can also be very useful for images in your responsive web design. You can set a maximum height and crop the image. Put your image in a container and set the width of your image to 100%. Then set the max-height of the container to 450px and hide the overlap by setting the overflow to hidden.
*/

.image-wrap {
    max-height: 450px;
    overflow: hidden;
    max-width: 800px;      
}

.image-wrap img {
    width: 100%;
}

@media only screen and (min-width: 1160px) {
    .image-wrap { max-width: 1000px }
}