Img растягивается в мобильном css

Question

Я пытаюсь создать сайт CV. Когда вы видите с мобильного телефона, у меня проблема с изображением. Он выглядит растянутым.

CSS-я использую здесь:

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

Изображение выглядит растянуты. Я не возражаю, если некоторые сантиметры справа и слева не показаны. Если я попробую height: relative;, он выглядит хорошо, но с большим расстоянием от следующего блока.

Answer 1

height: 100%; всегда растягивает его до высоты экрана, не влияя на ширину. лучший способ сделать это - использовать JQuery для установки высоты относительно ширины. один из способов сделать это - найти соотношение высоты: ширина (например, 1px: 1,75px) и применить его к ширине

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