将缩略图宽度与其父图像对齐

我在搜索学习flex的时候发现了代码。我是通过修改代码来学习的。但是,我无法修复缩略图的对齐方式以及上面的图像以响应方式匹配相同的宽度。一个图像移到图像右侧稍远的位置。我尝试将父对象的宽度设置为75vmin,但这不起作用。

在这儿

<div class="container">
  <section class="product-image col">
    <ul class="slides">
      <li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li>
      <li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li>
      <li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li>
      <li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li>
      <li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li>
    </ul>

    <ul class="thumbnails">
      <li>
        <a href="#slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" /></a>
      </li>
      <li>
        <a href="#slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" /></a>
      </li>
      <li>
        <a href="#slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" /></a>
      </li>
      <li>
        <a href="#slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" /></a>
      </li>
      <li>
        <a href="#slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" /></a>
      </li>
    </ul>
  </section>
  <section class="product-detail col">
    <h3>Main title is shown here</h3>
    <p>$45</p>
    <p>mini description is shown here with a toggle button
      which when clicked should show full detail
    </p>
  </section>
</div>

css

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnails {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  line-height: 0;
}

.thumbnails li {
  flex: auto;
}

.thumbnails a {
  display: block;
}

.thumbnails img {
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}

.slides {
  overflow: hidden;
  width: 75vmin;
  height: 70vmin;
}

.slides li {
  width: 75vmin;
  height: 70vmin;
  position: absolute;
  z-index: 1;
}

.slides img {
  height: 70vmin;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}

.slides li:target {
  z-index: 3;
  -webkit-animation: slide 1s 1;
}

.slides li:not(:target) {
  -webkit-animation: hidden 1s 1;
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes slide {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@-webkit-keyframes hidden {
  0% {
    z-index: 2;
  }

  100% {
    z-index: 2;
  }
}

@keyframes hidden {
  0% {
    z-index: 2;
  }

  100% {
    z-index: 2;
  }
}

演示也在jsbin中,这里是

http://jsbin.com/beratikano/1/edit?html,css