对齐分割图像的一半 - 响应

Question

我现在正在运行一个“可点击的拼图幻灯片”，其行为与背景大小相同：在狭窄的浏览器窗口中，纵横比和封面效果会被压缩。有没有办法保存纵横比，以及封面效果？
小提琴：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 （点击左侧查看背景图片半场完美匹配）

不要使用图片，如果您担心简单且比率 nable。
将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%用于DIV内溢出的50％宽度左侧覆盖容器：

*{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.

});

请参阅此演示并运行它以进行预览：

＆＃13;

＆＃13;

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

＆＃13;

*{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% */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;