Img stretched in mobile css

Question

I am trying to build a CV website. When seen from a mobile phone, I have a problem with the image. It looks stretched.

The CSS I am using is here:

        .image-featured img
    {
        position:absolute;
        top: 0;
        bottom:0;
        height: 100%;
        margin-left:auto;
        margin-right:auto;
        border-radius: 0.35em;      
    }

The image looks stretched. I do not mind if some cm from the right and left are not shown. If I try height: relative; it looks good but with a big distance from the next block.

Answer 1

height: 100%; always stretches it to the screen height, not affecting the width. a better way of doing it is using Jquery to set the the height relative to the width. one way of doing this is by finding the ratio of height:width (1px:1.75px for example) and applying that to the width

$(window).ready(function () {
   var height = screen.height;
   var width = height * 1.75 + 'px';
   $(img).css('height',height);
   $(img).css('width',width);
};