Jquery 如何使图像保持全窗口、居中且响应速度在比例范围内？

我正试图弄清楚这个网站是如何运作的 使响应标题图像在加载时填充窗口大小，并随着窗口大小调整大小，同时仍以其原始比率填充窗口

这是我到目前为止提出的，但它非常容易出错

工作

$（窗口）.load（函数（）{
$（'#intro background'）.height（$（window.height（））；
$（'#intro background img'）.height（$（window.height（））；
var imageRatio=（1900/1270）；//原始图像大小
$（窗口）。调整大小（函数（）{
$（'#intro background'）.height（$（window.height（））；
var windowRatio=$（窗口）.width（）/$（窗口）.height（）；
if（windowRatio！=imageRatio）{
if（$（'#intro background img'）.width（）<$（window.width（））{
$（'#intro background img'）.width（$（window.width（））；
$（'#intro background img'）。高度（$（window）.width（）/imageRatio）；
}else if（$（'#intro background img'）.height（）>$（window.height（））{
$（'#intro background img'）.height（$（window.height（））；
$（'#intro background img'）。宽度（$（window）.height（）*图像比率）；
}
if（$（'#intro background img'）.height（）<$（window.height（））{
$（'#intro background img'）.height（$（window.height（））；
$（'#intro background img'）。宽度（$（window）.height（）*图像比率）；
}
}
});
});

他们只是每秒运行一个脚本，执行计算，然后设置高度和宽度。在这种情况下，您可以明智地使用jQuery中的窗口调整功能

看看：

在你的小提琴中，你正在用$（窗口）调整一个div的大小 您可以通过使用CSS单独解决这个问题。 记住，使用javascript要比使用CSS慢

看看这个 因此，CSS中有以下内容：

*, html {
    height: 100%;
    width: 100%;
}

我还从#img id中删除了宽度和高度 现在调整大小可以完美地工作

如果你真的想在不设置错误比率的情况下调整图像大小，你可以在屏幕调整大小时查看我使用real image来调整大小的位置

您只需在那里执行以下操作：

$(window).resize(function() {
    var height = ($('#intro-background').width() / 4);    
    $('#img').css('height', height);
}); 

如果你想在真实图像上保持100%的高度，你也可以设置CSS来处理图像。看看这个

这里还需要在CSS中设置*、html，当然还需要使用背景大小：cover

请看这里：

*, html {
    height: 100%;
    width: 100%;
}

#img {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:red;
    margin: auto;
}

---

根据我的经验，我永远不会用你的代码来满足你所需要的，我的意思是有很多东西要考虑，分辨率，边界，转盘，旋转木马，移动等等。我总是使用<强> < /强>这类东西很容易，简洁，而且更快，或者如果你不需要和旧浏览器一起工作，考虑使用<强> css < /强>

#myelement{
    background-size:cover
}

---

我现在有了这个，效果很好

函数imageResize（）{
var imageRatio=（1900/1270）；//原始图像大小
if（$（'#intro background img'）.height（）！=$（window.height（））{
$（'#intro background img'）。高度（$（window.height（））。宽度（$（window.height（）*图像比率）；
if（$（'#intro background img'）.width（）<$（window.width（））{
$（'#intro background img'）.width（$（window.width（））.height（$（window.width（）/imageRatio）；
}
}}
imageResize（）；//称为onLoad
$（窗口）。调整大小（函数（）{
imageResize（）；
}); 

---

有没有更好的建议？我还希望图像保持在调整大小容器的中心。

尝试调整窗口大小，直到其高度小于100像素。宽度开始跳跃。我将在另一个浏览器中尝试，我放置的小提琴可以处理真实的图像，并且不会跳跃。您的小提琴至少是镀铬的，它允许容器的高度小于100%，从而限制图像的大小。我已经更新了我的小提琴链接。如果您在所有代码窗口可见的情况下查看它，您应该能够重新创建我提到的宽度跳跃（红色容器变窄，露出黄色）。我可以看到跳跃，让我看看是否可以为您更改。你能告诉我为什么你需要100%的身高吗？当您使用DIV时，您还可以做一些其他事情来保持高度100%和灵活性，而无需调整窗口大小。因此@Beno我创建了几个fiddle，基本上使用CSS而不是javascript为您的解决方案显示选项。这是更快，工作顺利，所以没有小故障。对不起，我更新了小提琴链接，不仅显示结果

#myelement{
    background-size:cover
}

function imageResize() {
var imageRatio = (1900 / 1270); //Original image size
if( $('#intro-background img').height() != $(window).height() ) {   
    $('#intro-background img').height( $(window).height() ).width( $(window).height() * imageRatio );
    if( $('#intro-background img').width() < $(window).width() ) {
        $('#intro-background img').width( $(window).width() ).height( $(window).width() / imageRatio );
    }
}}
imageResize(); // Called onLoad
$(window).resize(function() {
    imageResize();
});