如何实现尺寸统一、可跳转独立链接的分块商品Banner布局？

1. 布局逻辑调整 #

不要使用table实现这类不规则商品卡片布局，改用CSS Grid布局即可快速匹配你需要的「左侧1张大图占满2行高度，右侧2行每行排列2张小图」的效果：

• 整个Banner区域设为Grid容器，定义2行4列的基础网格
• 左侧第一个商品卡片设置跨2行、跨2列显示，占左侧整列高度
• 剩下4个卡片按顺序排列在右侧2行2列网格中

2. 统一图片尺寸方案 #

给所有商品图片套固定宽高的容器，搭配object-fit属性控制图片展示效果，既不会拉伸变形，也能保证所有图片尺寸完全一致：

• 给图片外层的a标签设置固定宽高，设置overflow: hidden避免内容溢出
• 图片宽高设为100%填充外层容器，加object-fit: cover属性，自动裁剪多余部分保证图片比例正常、完全覆盖容器

3. 调整后代码示例 #

替换后的HTML代码 #

@{    Layout = null;}
<link href="~/Content/bscarousel.css" rel="stylesheet" />
<script src="~/Scripts/Home/Slider.js"></script>

<style>
/* 新增Banner布局样式 */
.banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 按比例分配宽度，可自行调整比例，比如要左侧更大改为2fr 1fr 1fr 1fr即可 */
  grid-template-rows: 200px 200px; /* 固定行高，可根据需求修改 */
  gap: 8px; /* 卡片之间的间距，不需要可以设为0 */
  background-color: #4C8C9E;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
.banner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  overflow: hidden;
}
/* 左侧大图卡片跨2行2列 */
.banner-card.large {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}
.banner-card img {
  width: 100%;
  height: calc(100% - 24px); /* 减去下方文字的高度 */
  object-fit: cover; /* 核心属性：保证图片不变形、填满容器 */
}
.banner-card p {
  margin: 4px 0 0 0;
  height: 20px;
  line-height: 20px;
}
</style>

<div ng-controller="SliderController">
  <div class="banner-grid">
    <!-- 左侧大卡片 -->
    <a href="https://www.arkadasgrup.com/ListeArama/311/Seri" class="banner-card large">
      <img src="~/images/ShamanKing.jpg" alt="Shaman King" class="img-responsive">
      <p>Shaman King</p>
    </a>
    <!-- 右侧小卡片1 -->
    <a href="你的跳转链接" class="banner-card">
      <img src="你的图片地址" alt="商品名称" class="img-responsive">
      <p>商品名称</p>
    </a>
    <!-- 右侧小卡片2 -->
    <a href="你的跳转链接" class="banner-card">
      <img src="你的图片地址" alt="商品名称" class="img-responsive">
      <p>商品名称</p>
    </a>
    <!-- 右侧小卡片3 -->
    <a href="你的跳转链接" class="banner-card">
      <img src="你的图片地址" alt="商品名称" class="img-responsive">
      <p>商品名称</p>
    </a>
    <!-- 右侧小卡片4 -->
    <a href="你的跳转链接" class="banner-card">
      <img src="你的图片地址" alt="商品名称" class="img-responsive">
      <p>商品名称</p>
    </a>
  </div>
</div>

原有轮播CSS无需修改，如果你需要适配轮播逻辑，只需要把上面的.banner-grid整体放到对应的.carousel-item容器内即可。 #

额外优化说明 #

• 如果不需要裁剪图片，把object-fit: cover改成object-fit: contain即可，会保证图片完整显示，留白填充容器
• 所有卡片都是独立的a标签，各自配置跳转链接即可满足分块跳转需求

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