jquery - 对齐分割图像的两半 - 响应式

Question

我现在有一个“可点击的拼图幻灯片”正在运行，它的行为与背景大小:封面一样。然而，在狭窄的浏览器窗口中，宽高比和封面效果被压扁了。有没有办法保留纵横比，还有封面效果？
fiddle :http://jsfiddle.net/L84wj5my/

试图保存使用的方法是这个；但我愿意接受任何解决方案:

.cover {
position: fixed; 
top: 0; 
left: 0; 

min-width: 100%;
min-height: 100%;
}

$('#two li').click(changeImage);

function changeImage() {
  if($(this).is(':first-child')) {
    $(this).fadeOut(0).parent().find(':last-child').fadeIn(0);
  } else {
    $(this).fadeOut(0).prev().fadeIn(0);
  }
}


$('#one li').click(changeImage);

function changeImage() {
  if($(this).is(':first-child')) {
    $(this).fadeOut(0).parent().find(':last-child').fadeIn(0);
  } else {
    $(this).fadeOut(0).prev().fadeIn(0);
  }
}

body, ul {
  margin: 0;
  padding: 0;
}
body,html{
  height: 100%;
  width: 100%;

}

ul li {
  list-style-type: none;
}

.slides-box {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}

.slides {
  position: relative;
  height: 100%;
  width: 100%;
  margin: auto;
  float: left;
}

.slides li {
  position: absolute;
  width:  100%;
  height: 100%;
}

.slides li img{
  display: block;
  width: 100%;
  margin: auto;
}






.slides-box-left {
  float:left;
  width: 100%;
  height: 100%;
  margin: auto;
}

.slides-left {
  position: absolute;
  top:0;
  height: 100%;
  width: 50%;
  margin: auto;
  overflow: hidden;
  float:none;
}

.slides-left li {
  position: absolute;
  height: 100%;
  width: 100% !important;
  float: none;
  overflow: hidden;
  background-position: left !important;
}

.slides-left img{
  display: block;
  width: 100%;
  margin: auto;
  float:left;
  overflow:hidden;
}

.slides-left li img {
  position: absolute;
  left: 0;
  right: 0;
  width: 200%;
  height: auto !important;
}


.cover {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slides-box">
  <ul id="one" class="slides" >
    <li>
      <img src="https://unsplash.it/2560/1600?image=764" class="cover">
    </li>
    <li>
      <img src="https://unsplash.it/2560/1600?image=763" class="cover">
    </li>
    <li>
      <img src="https://unsplash.it/2560/1600?image=762" class="cover">
    </li>
    <li>
      <img src="https://unsplash.it/2560/1600?image=761" class="cover">
    </li>
    <li>
      <img src="https://unsplash.it/2560/1600?image=760" class="cover">
    </li>
  </ul>
</div>

<div class="left">
  <div class="slides-box-left">
    <ul id="two" class="slides-left">
      <li>
        <img src="https://unsplash.it/2560/1600?image=760" class="cover">
      </li>
      <li>
        <img src="https://unsplash.it/2560/1600?image=761" class="cover">
      </li>
      <li>
        <img src="https://unsplash.it/2560/1600?image=762" class="cover">
      </li>
      <li>
        <img src="https://unsplash.it/2560/1600?image=763" class="cover">
      </li>
      <li>
        <img src="https://unsplash.it/2560/1600?image=764" class="cover">
      </li>
    </ul>
  </div>
</div>

Answer 1

jsBin demo (左右点击，background-image两半完美匹配)

不要使用图片，如果您担心它会变得简单且比例可行。
使用 DIV 并将 background-size 设置为 cover

在 HTML 中分配背景图像路径(就像你为 img 做的那样):

<!-- The underneath 100% slides -->
<div class="slides">
  <div style="background-image:url(https://unsplash.it/2560/1600?image=761)"></div>
  <div style="background-image:url(https://unsplash.it/2560/1600?image=762)"></div>
  <div style="background-image:url(https://unsplash.it/2560/1600?image=763)"></div>
</div>

<!-- The 50% overflow overlaying left slides -->
<div class="slides left">
  <div style="background-image:url(https://unsplash.it/2560/1600?image=763)"></div>
  <div style="background-image:url(https://unsplash.it/2560/1600?image=762)"></div>
  <div style="background-image:url(https://unsplash.it/2560/1600?image=761)"></div>
</div>

现在 CSS 魔术使用:background: none 50%/cover; 和 width:200% 用于溢出的 50% 宽度左侧覆盖容器内的 DIV:

*{margin:0;}
html, body{height:100%;}

.slides{
  position:fixed;
  overflow:hidden;
  width:100%;
  height:100%;
}

.slides div{
  position:absolute;
  width:100%;
  height:100%;
  background: none 50% / cover;
}

.slides.left{
  width:50%;
}

.slides.left div{
  width:200%; /* since .left is 50% */
}

我看到您在淡化元素时遇到问题，所以在这里您使用全新的 jQuery:

$(".slides").each(function(){

  var $bg = $(this).find("> div"),
      n = $bg.length, // how many images we have?
      c = 0; // counter

  $bg.hide().on("click", function(){ // Hide all and do on click:
    $bg.fadeOut().eq( ++c % n ).stop().fadeIn();   // Increment and loop
  }).eq(c).show(); // Show first initially.

});

查看此演示并运行它进行预览:

$(".slides").each(function(){
  
  var $bg = $(this).find("> div"),
      n = $bg.length, // how many images we have?
      c = 0; // counter

  $bg.hide().on("click", function(){ // Hide all and do on click:
    $bg.fadeOut().eq( ++c % n ).stop().fadeIn();   // Increment and loop
  }).eq(c).show(); // Show first initially.
  
});

*{margin:0;}
html, body{height:100%;}

.slides{
  position:fixed;
  overflow:hidden;
  width:100%;
  height:100%;
}

.slides div{
  position:absolute;
  width:100%;
  height:100%;
  background: none 50% / cover;
}

.slides.left{
  width:50%;
}

.slides.left div{
  width:200%; /* since .left is 50% */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The underneath 100% slides -->
    <div class="slides">
      <div style="background-image:url(https://unsplash.it/2560/1600?image=761)"></div>
      <div style="background-image:url(https://unsplash.it/2560/1600?image=762)"></div>
      <div style="background-image:url(https://unsplash.it/2560/1600?image=763)"></div>
    </div>

    <!-- The 50% overflow overlaying left slides -->
    <div class="slides left">
      <div style="background-image:url(https://unsplash.it/2560/1600?image=763)"></div>
      <div style="background-image:url(https://unsplash.it/2560/1600?image=762)"></div>
      <div style="background-image:url(https://unsplash.it/2560/1600?image=761)"></div>
    </div>