Responsive Images Warping

It’s pretty difficult to know what your CSS properties are doing without seeing the related HTML. I would use the max-width property instead of width img{ max-width: 100%; }.

UPDATE:
I just noticed you provided a link. The height property is a problem:

.custom-hb-box img {
    display: block;
    height: 100%;
    opacity: 1;
    transition: opacity 0.2s linear 0s;
    width: 100%;
}

Setting ‘.custom-hb-box img {height: auto; } seems to solve the image issue but you have problems with the text as well.

#main-content-with-sidebar .custom-hb-box {
    height: 205px !important;
    width: 33% !important;
}

Explicit pixel height won’t work. It looks like this is being done to compensate for the fact that the images do not have the desired aspect ratio. Resize your images to have a ratio of 211:205, this will match the container element.

Then try

#main-content-with-sidebar .custom-hb-box {
    height: auto;
}

Or just remove the height property in the above rule; it really isn’t needed.