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);
};