Question

我试图将几个图像缩略图排成一行，我希望能够通过悬停在每个图像上将它们缩放到窗口的全宽。我希望图像向下生长。我已经走到这一步了：

div {
  transition: all 0.2s ease-in-out;
}
div:hover {
  width: 95%;
}

我正在寻找的一些规格： - 缩略图高度：5vw（或200px） - 始终保持原始宽高比 - 缩放时，邻居缩略图应保持原位 - 缩放的图像不应跳到下一行 - 图像应在缩放时显示完整的文件分辨率 - 应该在桌面和移动设备上合理地工作（=点击而不是悬停）

如何实现这一目标？

Answer 1

你不需要javascript。

您可以使用flex在纯CSS中实现此目的。

可以强制图像在所有情况下都对齐（display: flex），然后目标图像容器比其他图像容器大10倍（常规情况flex: 1和flex: 10活跃的案例）。

可以使用锚点和:target CSS选择器设置移动版本。

以下是此解决方案的实现。

.container {
  display: flex;
  width: 100%;
  max-height: 220px;
}

.container > a {
  flex: 1;
  align-items: center;
  text-align: center;
  transition: flex 0.2s;
  line-height: 0;
}

.container > a:hover, .container > a:target {
  flex: 10;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <a href="#1" id="1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/1a/31/59/1a3159e4c899e2fd71b5fe58d0c2b5a9.jpg"/>
  </a>
  <a href="#2" id="2">
     <img src="https://ivymosquito.files.wordpress.com/2013/09/fox-eyes.jpg" />
  </a>
   <a href="#3" id="3">
     <img src="http://static.boredpanda.com/blog/wp-content/uploads/2016/07/fox-faces-roeselien-raimond-red-fox.jpg"/>
   </a>
</div>

使用javascript缩放到全窗口宽度

1 个答案: