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

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

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

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

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

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);
};
Другие вопросы по тегам