Изменение размера фонового изображения с помощью window-size

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

В настоящее время я работаю над проектом, для которого требуется, чтобы размер div a с фоновым изображением соответствовал высоте окна браузера. Эта часть работает, но я зациклен на том, чтобы изменить css-класс background-size на основе моего кода:

 $(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)"), w = $(window);

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:w.width(),height:w.height()});
        mydivs.css({ backgroundSize : windowWidth   ' '   windowHeight });

  });

})

1. Добавьте ‘px’, например mydivs.css({ backgroundSize: windowWidth ‘px’ windowHeight ‘px’ }); Если это не сработает, рассмотрите возможность публикации JSFiddle, чтобы мы могли его видеть.

2. это также background-size

Ответ №1:

используйте css для этого

   <style> 


      html { 
          background: url(images/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }


</style>

Ответ №2:

можно попробовать просто использовать css background-size:cover и или background-size:100% .

Чтобы обрабатывать смещения / соотношение сторон и различные размеры, мы можем установить изображение большего размера (для придания ему «воспроизведения»), чем нам нужно, а затем установить процент превышения, например.

background-size:120%

Ответ №3:

Ключевой проблемой, с которой я столкнулся в этом типе проблем, является css jquery, как в следующем примере:

 .css({backgroundSize: '400px 300px'});//won't work
.css(backgroundSize,'400px 300px');//works

Итак, сначала попробуйте изменить

mydivs.css({ backgroundSize : windowWidth ' ' windowHeight });

с помощью:

 mydivs.css( backgroundSize , windowWidth   ' '   windowHeight);

Если проблема не в этом, попробуйте это:

 $(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)");

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:windowWidth   'px',height:windowHeight   'px'});
        mydivs.css({ backgroundSize : windowWidth   'px'   ' '   windowHeight   'px' });

  });

})