使缩略图垂直后，图像比flex-viewport宽

是指在使用flex布局时，缩略图的宽度比flex容器的宽度要小。

在前端开发中，使用flex布局可以轻松实现响应式设计和灵活的布局。当我们将缩略图垂直排列时，可以通过设置flex容器的属性来控制缩略图的宽度。

具体实现方法如下：

1. 首先，将缩略图的父容器设置为flex容器，可以通过设置父容器的display属性为flex来实现。

.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

1. 接下来，设置缩略图的宽度。可以通过设置缩略图的flex属性来实现，flex属性可以指定项目在flex容器中的占比。

.thumbnail {
  flex: 1; /* 缩略图占据剩余空间 */
}

通过设置flex属性为1，缩略图会占据剩余的空间，从而使其宽度比flex容器的宽度要小。

1. 最后，将缩略图的高度设置为自适应，可以通过设置缩略图的height属性为auto来实现。

.thumbnail {
  height: auto; /* 高度自适应 */
}

这样，当缩略图垂直排列时，它们的宽度会比flex容器的宽度要小，同时高度会根据内容自适应。

在腾讯云的产品中，可以使用云存储服务 COS（对象存储）来存储和管理缩略图。COS 提供了高可靠性、高可扩展性的对象存储服务，适用于各种场景，包括网站托管、移动应用、大数据分析、备份与归档等。

腾讯云 COS 产品介绍链接地址：https://cloud.tencent.com/product/cos