在移动CSS中拉伸的Img

Question

我正在尝试建立一个简历网站。 从手机上看时，我的图像有问题。 看起来很舒展。

我正在使用的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设置相对于宽度的高度。 一种方法是通过找到height：width的比率（例如1px：1.75px）并将其应用于宽度

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