Question

我在google搜索学习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

应该以这种方式对齐

Answer 1

问题是你要混合和匹配高度和宽度。

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

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

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

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

1 个答案: