0

我试图弄清楚这个网站是如何制作响应式标题图像的，该图像在 加载时填充窗口大小并随着窗口调整大小而调整大小，同时仍以原始比例填充窗口。

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

工作小提琴

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

      }
   });
});
4

3 回答 3

0

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

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

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

看看这个小提琴 因此CSS中的以下内容：

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

我还从#img id Resizing 中删除了宽度和高度，现在可以正常工作了

如果您真的想在不设置错误比例的情况下调整图像大小，您可以查看这个小提琴，其中我使用真实图像来调整屏幕大小。

您所要做的就是：

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

如果您想在真实图像上保持 100% 的高度，您还可以设置 CSS 来为您处理图像。看看这个小提琴。

这里还需要在 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;
}
于 2015-12-17T11:05:42.423 回答
0

根据我的经验，我永远不会使用像你这样的代码来满足你的需要，我的意思是有很多东西需要考虑，分辨率、边框、过渡、轮播、移动等。我总是使用BACKSTRETCH，它很简单、精简、更快对于这种东西，或者如果您不需要使用旧浏览器，请考虑使用CSS

#myelement{
    background-size:cover
}
于 2015-12-17T11:09:23.930 回答
0

我现在有这个效果很好

小提琴

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

有什么建议可以更好地做到这一点吗？我还希望图像保持在调整大小容器的中心。

于 2015-12-17T19:20:43.060 回答