如何用Thymeleaf定义Div尺寸并区分视频与图片？

Hey，我来帮你解决这个布局错位和媒体区分的问题，分几个步骤来实现：

一、先把所有媒体改成统一正方形 #

你的Bootstrap栅格已经搭好了，但没锁定容器的宽高比，导致图片视频大小不一。我们用padding百分比技巧来做响应式正方形，不管屏幕怎么变，比例都是1:1：

1. 给每个媒体加一个外层容器，用padding-top: 100%（因为padding的百分比是基于宽度计算的，100%就等于宽度，完美实现正方形）
2. 把图片/缩略图设为绝对定位，填满容器，用object-fit: cover保证图片不拉伸变形

修改后的Thymeleaf代码：

<div class="row text-center text-lg-left">
  <div th:each="inst, iStat : ${instances}" 
       class="col-lg-3 col-md-4 col-6 mb-4" <!-- 把margin移到这里，结构更简洁 -->
       th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
    <!-- 核心：正方形容器 -->
    <div class="media-square position-relative overflow-hidden">
      <a href="#" class="d-block w-100 h-100 position-absolute top-0 left-0"
         data-target="#showMedia" data-toggle="modal" th:data-slide-to="${iStat.index}">
        <img class="img-fluid position-absolute top-0 left-0 w-100 h-100 object-fit-cover"
             th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
             th:alt="${inst.mediaType == 'VIDEO' ? '视频缩略图' : '图片'}">
        <!-- 视频播放按钮后续添加 -->
      </a>
    </div>
  </div>
</div>

然后添加几行CSS：

.media-square {
  width: 100%;
  padding-top: 100%; /* 1:1 正方形比例 */
  position: relative;
}

这样每个媒体块都会是整齐的正方形，图片视频自动适配，再也不会错位啦。

二、区分图片和视频，给视频加播放按钮 #

首先得让后端给你返回每个媒体的类型（比如inst对象里加个mediaType字段，值为IMAGE或VIDEO），然后用Thymeleaf判断，给视频加个居中的播放按钮：

修改代码，在图片上方插入播放按钮：

<div class="media-square position-relative overflow-hidden">
  <a href="#" class="d-block w-100 h-100 position-absolute top-0 left-0"
     data-target="#showMedia" data-toggle="modal" th:data-slide-to="${iStat.index}">
    <img class="img-fluid position-absolute top-0 left-0 w-100 h-100 object-fit-cover"
         th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
         th:alt="${inst.mediaType == 'VIDEO' ? '视频缩略图' : '图片'}">
    <!-- 只给视频显示播放按钮 -->
    <div th:if="${inst.mediaType == 'VIDEO'}" 
         class="play-btn position-absolute top-50 start-50 translate-middle">
      <span class="play-icon">▶</span>
    </div>
  </a>
</div>

再给播放按钮加样式，让它好看又显眼：

.play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.play-icon {
  color: white;
  font-size: 24px;
  margin-left: 3px; /* 让箭头稍微居中一点 */
}

如果你项目里用了Font Awesome，换成图标会更美观：

<div th:if="${inst.mediaType == 'VIDEO'}" 
     class="play-btn position-absolute top-50 start-50 translate-middle">
  <i class="fas fa-play text-white fs-3"></i>
</div>

三、小优化建议 #

• 给视频缩略图加个hover效果，比如opacity: 0.9，鼠标移上去变回1，增强交互感
• 如果视频没生成缩略图，记得加个默认的视频封面图备用
• 确认你用的Bootstrap版本支持position-relative、top-50这些工具类（Bootstrap 5+都支持，旧版本的话要自己写定位代码）

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