Question

我有一个jquery脚本，用于浏览具有完整浏览器宽度和高度的图像：

CSS：

#wrap{
    position:fixed;
    z-index:-1; 
    top:0; 
    left:0; 
    background-color:black
}
#wrap img.bgfade{
    position:absolute;
    top:0;
    display:none;
    background-position: center;
    background-size: cover;
    width:100%;
    height:100%;
    z-index:-1
}

HTML：

<div id="wrap">
<img class="bgfade" src="/images/homepage/splash/1.jpg">
<img class="bgfade" src="/images/homepage/splash/2.jpg">
<img class="bgfade" src="/images/homepage/splash/3.jpg">
<img class="bgfade" src="/images/homepage/splash/4.jpg">
<img class="bgfade" src="/images/homepage/splash/5.jpg">
<img class="bgfade" src="/images/homepage/splash/6.jpg">
<img class="bgfade" src="/images/homepage/splash/7.jpg">
<img class="bgfade" src="/images/homepage/splash/8.jpg">
<img class="bgfade" src="/images/homepage/splash/9.jpg">
<img class="bgfade" src="/images/homepage/splash/10.jpg">
<img class="bgfade" src="/images/homepage/splash/11.jpg">
</div>

jQuery的：

<script>
$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(4000);
    setTimeout(anim, 7500);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})
</script>

这可以治疗，但没有反应:-(

我无法使用

background-size: cover; 或 background-position: center;

因为它不是背景。

当浏览器在iPhone / iPad等上调整大小或查看时，我还能如何缩放图像，如下所示：

目前看起来很奇怪：

distored image from my upload

这个网站管理得很好（但不幸的是我的脚本不是在寻找背景图片）：

http://www.britishactionacademy.com/

这里的任何帮助将不胜感激。谢谢！ :-)

Answer 1

如果您坚持使用图片，则可以在object-fit: cover;标记上使用img ...但由于object-fit在浏览器中尚未得到很好的支持...您可以使用

DIV和background-size: cover;

使用 CSS3 进行使用transition，visibility和opacity

的淡入淡出动画

＆＃13;

$(".bgfade").each(function() {
  
  var $slides = $(this).find(">div"),
      n = $slides.length,
      c = 0;
  
  function anim(){
    $slides.removeClass("active").eq(c++%n).addClass("active");
  }
  
  anim();                  // First run
  setInterval(anim, 3000); // Loop
  
});

＆＃13;

/*QuickReset*/*
{box-sizing:border-box}html,body{margin:0;height:100%;}

/* BGFADE */
.bgfade{
  position: fixed; 
  z-index: -1; 
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
  background: #000;
}
/* BGFADE SLIDES */
.bgfade > div {
  background: none 50%; /* Set background-image trough HTML */
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 1s; -webkit-transition: 1s;   /* Add animation transition */
}
/* .active is handled by jQuery */
.bgfade > div.active{
  visibility: visible;
  opacity: 1;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bgfade">
  <div style="background-image:url('http://placehold.it/800x600/0bf?text=Hello')"></div>
  <div style="background-image:url('http://placehold.it/800x600/fb0?text=World!')"></div>
  <div style="background-image:url('http://placehold.it/800x600/bf0?text=This')"></div>
  <div style="background-image:url('http://placehold.it/800x600/0fb?text=is')"></div>
  <div style="background-image:url('http://placehold.it/800x600/f0b?text=cool!')"></div>
</div>

＆＃13;

Answer 2

$('#wrap').css({'height':dg_H,'width':dg_W})

$(window).load时计算宽度和高度。它们在px中是静态的。

请改为尝试：

$('#wrap').css({'height':'100%','width':'100%'});

如何让我的全宽jQuery图像推子响应？

2 个答案: