Tailwind CSS图片比例问题求助：全屏窗口下显示异常

你的代码里存在一个关键问题：lg:h-74是Tailwind默认不提供的高度类——默认高度类均为4px倍数（如h-72、h-76），未自定义配置的话，这个类在大屏幕环境下不会生效，导致容器高度异常，进而破坏图片显示比例。

以下是两个可行的修复方案：

方案1：使用固定比例容器（推荐） #

抛弃固定高度，改用Tailwind的aspect-*类维持容器比例，确保窗口大小变化时图片始终保持正确比例：

<div class="relative w-full aspect-[16/9] sm:px-4">
    <a href="<?= htmlspecialchars($post['imagepath']) ?>" data-caption="Caption">
        <img src="<?= htmlspecialchars($post['imagepath']) ?>" alt="" class="sm:rounded-lg w-full h-full object-cover">
    </a>
</div>

将aspect-[16/9]替换为你需要的比例即可（比如aspect-square、aspect-[4/3]）。

方案2：修复自定义高度类 #

如果必须使用固定高度，需要在tailwind.config.js中手动定义h-74类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      height: {
        '74': '18.5rem', // 替换为你实际需要的像素/rem值
      },
    },
  },
}

配置完成后，lg:h-74即可在大屏幕下正常生效。

另外确认图片的object-cover类已正确应用，这个类会保证图片填充容器的同时维持自身比例，避免拉伸变形。

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