Tailwind中调整手机图片高度后占满空间的问题解决求助

核心原因 #

你当前使用的是Tailwind CSS v1.0，而h-[200px]这类方括号自定义数值的类名语法是从Tailwind v2.0才开始支持的，所以这个语法在v1环境下完全不生效，浏览器无法识别该类，导致图片以原始尺寸显示，出现“巨型手机”的问题。即使使用预设的h-48这类高度类如果无效，大概率也是因为图片原始尺寸过大，且缺少比例控制属性。

具体解决方案 #

方案一：升级Tailwind到最新版本（推荐）

直接替换head中的Tailwind CDN链接为最新版本，这样不仅能支持自定义高度语法，还能获得更多新特性和修复：

<link href="https://unpkg.com/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

升级后，h-[200px]、h-48等高度类都能正常生效，同时建议给图片添加object-contain保证比例：

<img src="iphone.png" title="Phone" class="h-[200px] flex-none shrink-0 grow-0 object-contain">

方案二：在v1.0环境下兼容解决

如果暂时无法升级，可通过以下两种方式设置高度：

• 内联样式直接指定高度：

<img src="iphone.png" title="Phone" class="flex-none shrink-0 grow-0" style="height: 200px;">

• 自定义CSS类：
  在页面head中添加自定义样式：

<style>
  .h-200 {
    height: 200px;
  }
</style>

然后给图片应用该类：

<img src="iphone.png" title="Phone" class="h-200 flex-none shrink-0 grow-0">

额外优化

无论采用哪种方案，都建议给图片添加object-contain类，确保图片在调整高度时不会变形，保持正确的宽高比例：

<img src="iphone.png" title="Phone" class="h-48 flex-none shrink-0 grow-0 object-contain">

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