Img 在移动 css 中拉伸

Posted 2023-03-10

【中文标题】Img 在移动 css 中拉伸

【英文标题】：Img stretched in mobile css

【发布时间】：2015-02-15 16:37:19

【问题描述】：

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

我使用的 CSS 在这里：

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

图像看起来被拉伸了。我不介意是否未显示左右几厘米。如果我尝试height: relative;，它看起来不错，但距离下一个街区很远。

【问题讨论】：

为什么不用它作为 CSS 的背景呢？而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);
;