如何实现横向溢出排列的图片查看器 缩放时自适应尺寸与对齐

你要的效果完全不需要JS，仅靠HTML+CSS就能实现，大致实现逻辑如下：

• 先加一个外层容器包裹所有的图片、视频资源，用CSS给容器设置Flex横向布局，关闭自动换行，所有子元素就会自动沿水平方向排列
• 给外层容器设置横向溢出滚动属性，宽度占满整个浏览器视口，超出容器宽度的内容就会自动触发横向滚动条
• 给内部的图片、视频设置基于视口单位的尺寸规则，比如统一固定高度占浏览器可视高度的80%，宽度自适应，同时设置最大宽度限制，页面缩放时视口参数会自动更新，所有资源的尺寸会同步适配调整
• 给外层Flex容器设置垂直居中对齐规则，所有图片、视频就能自动垂直居中，不会出现高低错位的问题

你当前的初始代码可以直接基于这个逻辑扩展：

<html>
<body>
<video controls="" loop="" autoplay="" class="" src="somevideo"></video>
</body>
</html>

内容的提问来源于stack exchange，提问作者Luigi