Как исправить объект-исправить изменение размера изображения прыжки

Question

Я пытаюсь поработать над слайдером изображений, в котором вы представляете изображение с миниатюрами внизу, и когда вы нажимаете на миниатюру, оно показывает другое изображение. Больше похоже на то, что вы видите на странице сведений о продукте, когда они показывают разные виды одного и того же продукта. В любом случае, я пытаюсь подогнать изображение под размер рамки, чтобы независимо от его размера, изображение заполняло ширину и высоту рамки. Однако при использовании 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;

в слайдере>img

и сделал его максимальную высоту до 300 пикселей, где он был на 100%

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