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

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 有一个自动高度，这样它会让图像适合而不是把它放在缩略图前面。