引导程序中的图像网格作为按钮

问：

我有 4 张不同尺寸的图像。我想创建一个 2x2 的网格，每个块彼此相等，它是一个可点击的图像（用作按钮）。如何在 CSS/Bootstrap 中执行此操作？

这是我尝试过的（在Rails中）：

<div class="row row-cols-2 main-wrapper px-4">
      <%= link_to students_path, class:"nav-link col btn btn-light center-div" do %>
        <%= image_tag "/assets/bg/cs-ds-bg.jpeg" %>
        <p class="h2">Student stories & Research</p>
      <% end %>
      <%= link_to faculties_path, class:"nav-link col btn btn-light center-div" do %>
        <%= image_tag "/assets/bg/cs-bg.jpeg" %>
        <p class="h2">Faculty & Staff</p>
      <% end %>
      <%= link_to courses_path, class:"nav-link col btn btn-light center-div" do %>
        <p class="h2">Courses</p>
      <% end %>
      <%= link_to requirements_path, class: "nav-link col btn btn-light center-div" do %>
        <p class="h2">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 #000000;
}

这是它现在的样子

谢谢！