如何使图像完整 window、居中并在比例范围内响应？

Question

我想弄明白这个网站是怎么回事here 已制作响应式 header 图像，该图像填充 window 大小并使用 window 调整大小，同时仍以其原始比例填充 window。

这是我到目前为止想出的，但它非常有问题...

$(window).load(function() {
    $('#intro-background').height( $(window).height() );
    $('#intro-background img').height( $(window).height() );
    var imageRatio = (1900 / 1270); //Original image size

    $(window).resize(function() {
      $('#intro-background').height( $(window).height() );
      var windowRatio = $(window).width() / $(window).height();

      if(windowRatio != imageRatio) {

        if($('#intro-background img').width() < $(window).width()) {
            $('#intro-background img').width($(window).width());
            $('#intro-background img').height($(window).width() / imageRatio);
        } else if( $('#intro-background img').height() > $(window).height() ) {
            $('#intro-background img').height($(window).height());
            $('#intro-background img').width($(window).height() * imageRatio);  
        }

        if($('#intro-background img').height() < $(window).height()) {
          $('#intro-background img').height($(window).height());
          $('#intro-background img').width($(window).height() * imageRatio);
        }

      }
   });
});

Answer 1

他们只是每秒运行一个脚本来进行计算，然后设置高度和宽度。在这种情况下，您明智地使用 jQuery

中的 window 调整大小功能

看：https://api.jquery.com/resize/

在您 fiddle 中，您正在使用 $(window).resize 调整 div 的大小您可以单独使用 CSS 来解决这个问题。请记住，使用 javascript 会比使用 CSS.

慢

看看这个fiddle 因此 CSS 中的以下内容：

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

我还从#img id 中删除了宽度和高度调整大小现在完美无缺

如果您真的想在不设置不正确比例的情况下调整图像大小，您可以查看 this fiddle，其中我使用真实图像在调整屏幕大小时调整大小。

你所要做的就是：

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

如果您想在真实图像上保持 100% 的高度，您还可以设置 CSS 来为您处理图像。看看 this fiddle 就知道了。

这里还需要在CSS中设置*，html，当然还要使用background-size: 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;
}

Answer 2

根据我的经验，我永远不会使用像您这样的代码来满足您的需求，我的意思是有很多东西需要考虑，分辨率、边框、过渡、旋转木马、移动设备等。我一直使用 BACKSTRETCH 这种东西简单、精简、快捷，或者如果您不需要使用旧浏览器，请考虑使用 CSS

#myelement{
    background-size:cover
}

Answer 3

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

Fiddle

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

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

如何使图像完整 window、居中并在比例范围内响应？

How to keep an image full window, centred and responsive within ratio?

jquery

fullscreen

responsive-images