如何用CSS/Bootstrap实现等大2x2可点击图片按钮网格？

要实现尺寸统一的2×2可点击图片网格，核心解决三个问题：区块高度一致、图片适配不拉伸、内容居中且层级正确，结合你的Rails代码，直接这么调整：

修改后的Rails ERB代码 #

<div class="row row-cols-2 main-wrapper px-4 g-0">
  <%= link_to students_path, class: "col nav-link btn btn-light center-div h-100 position-relative" do %>
    <%= image_tag "/assets/bg/cs-ds-bg.jpeg", class: "grid-image" %>
    <p class="h2 grid-text">Student stories & Research</p>
  <% end %>
  <%= link_to faculties_path, class: "col nav-link btn btn-light center-div h-100 position-relative" do %>
    <%= image_tag "/assets/bg/cs-bg.jpeg", class: "grid-image" %>
    <p class="h2 grid-text">Faculty & Staff</p>
  <% end %>
  <%= link_to courses_path, class: "col nav-link btn btn-light center-div h-100 position-relative" do %>
    <div class="grid-image placeholder-bg"></div>
    <p class="h2 grid-text">Courses</p>
  <% end %>
  <%= link_to requirements_path, class: "col nav-link btn btn-light center-div h-100 position-relative" do %>
    <div class="grid-image placeholder-bg"></div>
    <p class="h2 grid-text">Computer Science & Data Science <br>
      Major & Minor Requirements</p>
  <% end %>
</div>

调整后的CSS代码 #

.main-wrapper {
  height: 80vh;
}

.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid #000;
  padding: 0; /* 清除按钮默认内边距，让内容铺满区块 */
  overflow: hidden; /* 隐藏图片超出区块的部分 */
}

.grid-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例填充区块，裁剪多余部分，避免拉伸变形 */
  z-index: 0; /* 让图片在文字下方 */
  opacity: 0.7; /* 可选：降低图片透明度，保证文字可读性 */
}

.grid-text {
  position: relative;
  z-index: 1; /* 文字层级高于图片，确保能看清 */
  color: #000; /* 根据图片背景调整文字颜色 */
  text-align: center;
  margin: 0 1rem; /* 避免文字贴到区块边缘 */
}

.placeholder-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* 给无图片的区块设置统一背景色 */
  z-index: 0;
}

关键调整说明 #

• g-0：移除Bootstrap列之间的默认间距，让网格无缝衔接（需要间距的话换g-2这类值）
• h-100：强制每个列填充父行的高度，保证四个区块高度完全一致
• position-relative：给链接容器设置相对定位，方便图片和文字的层级控制
• object-fit: cover：解决图片尺寸不一的问题，让图片按比例铺满区块，只裁剪超出部分，不会拉伸变形
• 文字与图片的层级：通过z-index确保文字在图片上方，同时加透明度和边距提升可读性
• 无图片区块：用placeholder-bg设置统一背景色，保持视觉一致性

如果不想用img标签，也可以把图片设为区块背景：

<%= link_to students_path, class: "col nav-link btn btn-light center-div h-100 position-relative", style: "background-image: url('/assets/bg/cs-ds-bg.jpeg');" do %>
  <p class="h2 grid-text">Student stories & Research</p>
<% end %>

对应的CSS只要给.center-div加background-size: cover; background-position: center;即可。

内容的提问来源于stack exchange，提问作者Thai Nam Hoang