Feature column images are distorted when browser changes size

Hi,
I've just found that when the homepage is viewed in different size browser windows, the feature column images either become cropped or are distorted - stretched or compressed.
Why are the images not resized correctly?
If the responsive feature of this theme isn't working properly I'll have to use a different theme.
I've viewed it in Firefox and IE.
The site is www.jelenatomovic.com
Thanks.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (min-width: 960px) and (max-width: 1140px) {
.feature-content .feature-content-inner .image-box{
width:280px;
height:153px;
overflow:hidden;
}
.feature-content .feature-content-inner img{
width:280px;
height:153px;
}
}

 

Hi Nitesh,
I posted the code into the Custom CSS, but it has made no difference. The pictures still become distorted when I resize the browser window.

 

Hello,

I have checked your site on all size browsers (pc, iPad and iPhone). Images are looking fine.
Please share screenshot. Where you are getting problem.

 

These are two screenshots of a feature image that displays incorrectly when the browser is resized.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 480px){
.feature-content .feature-content-inner img{
width:280px;
height:140px!important;
}
}

 

Hi, I tried the code, but can't see any improvement when resizing the browser (Firefox).

 

Hello,

I have checked your site and found that code given above is working fine.
Please check image for reference.

 

Hi. No, the code is not fixing the problem. The x or y axis is changing. Compare the attached original image below. You can see that in your screenshot the image is compressed vertically, making the subject look fat.

 

So I guess there is no fix?

 

Hello,

Please share screenshot of your actual featured image and image which is compressed.
Because i really not getting any compressed image on your site while resizing browser.

 

???
But I did share screenshots of the actual feature image and the image which is compressed!
Post #5 has two screenshots of the actual feature image that is compressed.
Post #8, you shared a screenshot of the actual feature image. Although you said it is working fine, that image is actually compressed.
Post #9, I shared a screenshot of the actual feature image that is CORRECT and NOT compressed, for your comparison.
Surely I've provided enough information already? Or do I need to post the images again?

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

 @media only screen and (max-width: 480px){
.feature-content .feature-content-inner .image-box {
height: 170px;}
.feature-content .feature-content-inner img {
height: 170px!important;
}
}