Question

我正在尝试处理图像滑块，在该图像滑块中，您在其下方显示缩略图图像，当您单击缩略图时，它会显示另一个图像。更像是您在产品详细信息页面中看到的，当它们显示相同产品的不同视图时。无论如何，我试图将图像调整到盒子的大小，这样无论大小如何，图像都会填满盒子的宽度和高度。但是，使用对象修复：封面，当我单击缩略图时，图像似乎被压扁了一秒钟，然后再调整到现在。我想知道是否有其他解决方案我可以使用它来修复它？

事实上，我试图将缩略图分组到图像下面，以便我可以裁剪图像，而不会将图像限制在另一个代码集示例中：http://codepen.io/kikibres/pen/yNGPQR但我无法使其工作...... < / p>

这是一个正在工作但有调整大小问题的人：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;

滑块＆gt; img

中的

并将其最大高度设为300px（100％

）

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

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

1 个答案: