如何用Bootstrap或CSS实现图片等尺寸且响应式显示？

问题分析 #

你当前的Bootstrap列布局（col-md-6 col-lg-4）已经满足移动端1列、中等屏2列、大屏3列的需求，但图片尺寸不一致的核心原因是：原生card-img仅默认设置了max-width:100%和height:auto，图片会按自身比例自适应，导致高度参差不齐；之前尝试的object-fit:cover未生效，是因为没有给图片设置固定的容器高度。

具体修改方案 #

1. 调整HTML结构

给所有图片添加自定义类（比如portfolio-img），替换原有的card-img为card-img-top（确保图片在卡片顶部，避免卡片内边距影响）：

<section id="portfolio">
  <h2>Portfolio</h2>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/blog.jpg" class="card-img-top portfolio-img"
              alt="landing page for a recipe website, showcasing fresh vegetales, uncooked pasta noodles, hand towel and wooden spoon"
            >
          </a>
          <h4 class="card-title">Blog</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/small-business.jpg" class="card-img-top portfolio-img"
              alt="Landing page for Patriot Heating and Air website, red white and blue theme"
          ></a>
          <h4 class="card-title">Small Business</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/collegiate.jpg" class="card-img-top portfolio-img"
              alt="common area at a university with large floor to ceiling windows, greenery outside, and people milling about"
            >
          </a>
          <h4 class="card-title">Collegiate</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/portfolio.jpg" class="card-img-top portfolio-img"
              alt="Landing page for a chef's website showing his bio and an picture of chef Jack in a red apron"
            >
          </a>
          <h4 class="card-title">Portfolio</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/hobby.jpg" class="card-img-top portfolio-img"
              alt="landing page screenshot for homestead website, mother and child in garden"
            >
          </a>
          <h4 class="card-title">Hobby</h4>
        </div>
      </div>

      <!-- 补充你遗漏的第6张卡片 -->
      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/your-sixth-img.jpg" class="card-img-top portfolio-img"
              alt="你的第6张图片描述"
            >
          </a>
          <h4 class="card-title">第六个项目</h4>
        </div>
      </div>
    </div>
  </div>
</section>

2. 添加自定义CSS

通过固定图片高度+object-fit:cover实现尺寸统一，同时保留响应式特性：

/* 统一所有portfolio图片的尺寸 */
.portfolio-img {
  width: 100%;
  height: 300px; /* 可根据需求调整高度，比如250px/350px */
  object-fit: cover; /* 保持图片比例，裁剪超出部分，避免拉伸变形 */
  object-position: center; /* 裁剪时优先保留图片中心区域 */
}

/* 移动端可选优化：如果希望移动端图片高度自适应，可添加以下媒体查询 */
@media (max-width: 767px) {
  .portfolio-img {
    height: auto; /* 移动端按图片原比例自适应高度 */
    /* 若要保持固定高度，删除此行即可 */
  }
}

关键说明 #

• card-img-top确保图片填充卡片顶部，消除默认内边距干扰
• object-fit:cover是核心：在固定高度下，保持图片比例，裁剪多余部分，不会拉伸变形
• 固定高度可以根据你的设计需求调整，所有图片会统一使用这个高度，宽度自适应列布局

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