如何用Tailwind CSS将任意尺寸图片设为固定比例居中封面？

针对你的About板块两栏布局需求，直接用以下方式就能实现图片不管原始尺寸都保持3:4比例且居中显示：

核心实现方案 #

通过Tailwind的自定义宽高比类固定容器比例，配合图片对象适配属性控制居中显示，同时用响应式Grid完成两栏布局。

1. 完整代码示例 #

<section class="py-12 px-4 max-w-6xl mx-auto">
  <!-- 响应式两栏：移动端单列堆叠，桌面端双列分布 -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
    <!-- 文字描述区域 -->
    <div>
      <h2 class="text-3xl font-bold mb-4">About Me</h2>
      <p class="text-gray-700 mb-4">这里替换成你的About板块描述文字，支持多行内容自由排版...</p>
      <p class="text-gray-700">补充的介绍信息、项目背景等内容，都可以放在这个区域展示</p>
    </div>
    <!-- 图片区域：固定3:4比例 + 居中适配 -->
    <div class="aspect-[3/4] overflow-hidden mx-auto rounded-lg shadow-md">
      <img src="你的图片地址" alt="About Image" class="w-full h-full object-center object-cover">
    </div>
  </div>
</section>

2. 关键类作用说明 #

• grid-cols-1 md:grid-cols-2：实现响应式布局，屏幕宽度≥768px时自动分为两栏，移动端自动切换为单列
• aspect-[3/4]：强制图片容器保持宽3:高4的固定比例，容器宽度变化时高度会自动按比例计算
• overflow-hidden：如果图片尺寸超出容器，自动裁剪多余部分（若需完整显示图片，可替换为object-contain并给容器加bg-gray-100作为背景）
• mx-auto：让图片容器在当前列中水平居中
• object-center：让图片在容器内同时实现水平、垂直居中
• object-cover：让图片填满容器，裁剪超出部分（追求图片完整显示时，换成object-contain即可）

3. 可选样式优化 #

如果需要给图片加圆角、阴影等装饰，直接给图片容器添加rounded-lg、shadow-md这类Tailwind类即可，完全兼容现有布局逻辑。

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