使用javascript缩放到整个窗口宽度

我试图把一对图像缩略图放在一条直线上，我希望能够通过在每个图像上悬停来将它们缩放到窗口的全宽。我希望图像向下生长。我已经走了这么远：

我正在寻找的一些规格： -缩略图高度：5vw（或200px） -始终保持原始纵横比 -放大时，相邻缩略图应保持在原位 -缩放后的图像不应跳到下一行 -图像缩放时应显示完整的文件分辨率 -在桌面和手机上都能正常工作（=单击而不是悬停）

---

如何实现这一点？

您不需要javascript

您可以使用纯CSS实现这一点

可以强制在所有情况下对齐图像（

display:flex

），然后使目标图像容器比其他图像容器大10倍（常规情况下为

flex:1

，活动情况下为

flex:10

）

可以使用锚定和

：target

CSS选择器设置到移动版本

下面是这个解决方案的一个实现

.container{
显示器：flex；
宽度：100%；
最大高度：220px；
}
.container>a{
弹性：1；
对齐项目：居中；
文本对齐：居中；
过渡：flex 0.2s；
线高：0；
}
.container>a:悬停.container>a:目标{
弹性：10；
}
img{
最大宽度：100%；
最大高度：100%；
}

---

这不需要javascript

您可以使用纯CSS实现这一点

可以强制在所有情况下对齐图像（

display:flex

），然后使目标图像容器比其他图像容器大10倍（常规情况下为

flex:1

，活动情况下为

flex:10

）

可以使用锚定和

：target

CSS选择器设置到移动版本

下面是这个解决方案的一个实现

.container{
显示器：flex；
宽度：100%；
最大高度：220px；
}
.container>a{
弹性：1；
对齐项目：居中；
文本对齐：居中；
过渡：flex 0.2s；
线高：0；
}
.container>a:悬停.container>a:目标{
弹性：10；
}
img{
最大宽度：100%；
最大高度：100%；
}

谢谢！Flex似乎非常有用。然而，这并不是我想要的。我正在寻找一种解决方案，可以在缩略图都有一定高度的情况下缩放到（水平）全屏。或者，实际上90%的宽度更好，因为可以保留flex生成的缩小缩略图。作为奖励，如果高度限制为窗口大小（适合宽度/高度，以先达到最大的为准），那就太好了。这当然是基本实现。您可以使用flex和我的代码作为起点来实现这一点。谢谢！Flex似乎非常有用。然而，这并不是我想要的。我正在寻找一种解决方案，可以在缩略图都有一定高度的情况下缩放到（水平）全屏。或者，实际上90%的宽度更好，因为可以保留flex生成的缩小缩略图。作为奖励，如果高度限制为窗口大小（适合宽度/高度，以先达到最大的为准），那就太好了。这当然是基本实现。您可以使用flex和我的代码作为起点来实现这一点。

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