水平滚动图像被拉伸

Question

我有一个水平滚动的图片库。

滚动条的高度固定，图像应占据滚动条高度的100％。 图片的宽度可变，但在滚动时应保持其宽高比。

我用Codepen简化了操作，但是没有切换就可以正常工作。然后，我用自己的真实规格进行了测试：

• 首先，它是隐藏的
• 然后在用户单击按钮时，图库可见

这是codepen：https://codepen.io/Liroo/pen/zYYgGWz 错误所在的网站：http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton

这个简单的（s）css：

&__gallery {
   border-bottom: solid 1px white;
   height: 32vw;

   &__image {
     height: 100%;
   }
}

在码本中可能会起作用（因为有时不是），但是如果您检查网站链接，它总是有问题的。

您可以通过玩off div的#toggle类来更新它，您将看到这种奇怪的行为。

我已经制作了此bug的javascript版本，但是我想知道是否有CSS解决方案。 （这是我以前的解决方案：http://jensingvarsson.studio-push.com/）

编辑：

在这里您可以在图库中找到该错误：http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton

有时它会拉伸，有时会因为父div的宽度较小而只剪切图像。