html - 如何修复对象修复图像调整大小跳跃

Question

我正在尝试使用图像 slider ，在该 slider 中，您可以在其中显示下方带有缩略图的图像，当您单击缩略图时，它会显示另一幅图像。当它们显示同一产品的不同 View 时，更像是您在产品详细信息页面中看到的内容。无论如何，我正在尝试使图像适合盒子的大小，以便无论大小是多少，图像都会填满盒子的宽度和高度。但是，使用 object-fix: cover，当我单击缩略图时，图像在调整大小之前似乎被压扁了一秒钟。我想知道是否有任何其他解决方案可以用来修复它？

事实上，我试图将缩略图分组在图像下，这样我就可以裁剪图像而不限制另一个代码笔示例中的图像:http://codepen.io/kikibres/pen/yNGPQR但我无法让它工作...

这是一个可以正常工作但存在大小调整问题的程序:http://codepen.io/kikibres/pen/xGmPpo

HTML

<div class="width">
<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label for="id1">
        <img src="http://i.imgur.com/9oFAr6F.jpg" />
    </label>
    <img src="http://i.imgur.com/9oFAr6F.jpg"/>

    <!--Lets show the second image by default on page load-->
    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label for="id2">
        <img src="http://i.imgur.com/Q3DVhY0.jpg" />
    </label>
    <img src="http://i.imgur.com/Q3DVhY0.jpg"/>


</div>

<!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixes
You can download it from http://leaverou.github.com/prefixfree/ -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
</div>

CSS

* {margin: 0; padding: 0;}
body {background: #ccc;}

.width { width: 600px; margin-left: auto; margin-right: auto; margin: 100px auto;}

.slider{
    width: 100%; /*Same as width of the large image*/
  height: 300px;
    position: relative;

    /*Instead of height we will use padding*/
    /*padding-top: 320px; /*That helps bring the labels down*/

    /*Lets add a shadow*/
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
  border: 3px solid #000;
}


/*Last thing remaining is to add transitions*/
.slider>img{
    position: absolute;
    left: 0; right: 0; top: 0;
    transition: all 0.5s;
  overflow: auto;
  margin: auto;
  /*max-height: 400px;
  max-width: 400px;*/
  width: 100%;
  height: 100%;
  text-align: center;
  object-fit: cover;
}

.slider input[name='slide_switch'] {
    display: none;
}

.slider label {
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;

    float: left;
    cursor: pointer;
    transition: all 0.5s;
  position: relative;
  top: 300px;
  left: 0;

    /*Default style = low opacity*/
    opacity: 0.6;
}

.slider label img{
    display: block;
  width: 80px;
  max-width: 100%;
  height: 50px;
  max-height: 100%;
  object-fit: cover;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
    opacity: 0;
    /*transform: scale(1.1);*/
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    /*transform: scale(1);*/
}

Answer 1

我注释掉了

  transition: all 0.5s;
  overflow: auto;

在 slider >img

并将它的最大高度设为 300px，这是 100%

http://codepen.io/anon/pen/ZGVadZ