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

Question

我在谷歌搜索学习 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;
  }
}

demo 也在 jsbin 中，这里是

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

应该以这种方式响应对齐

Answer 1

问题在于您正在混合和匹配高度和宽度。

您的 li 和缩略图容器具有相同的宽度，这是理想的。但是，您的图像仅占 li 的一部分。

如果您希望图像响应地调整大小，它必须具有 100% 的宽度（它将与其容器相关）和自动高度。或者相反，如果您正在寻找高度作为适应的变量。

这意味着在您的代码中，您还需要让包含的 li 具有自动高度，以便它可以让图像适合而不将其放在缩略图前面。