javascript - 使用 JavaScript 缩放至全窗口宽度

Question

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

https://jsfiddle.net/jimhoyle/tfkgcxx7/

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 对于事件情况)。

可以使用 anchor 和 :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>