如何在 TailWind 中设置与窗口大小成比例的高度？答案

【问题标题】：How can I set the height proportionate to the window size in TailWind?如何在 TailWind 中设置与窗口大小成比例的高度？
【发布时间】：2020-11-04 05:50:43
【问题描述】：

我正在尝试使用图像创建横幅。我遇到的问题是，当我在 Tailwind 中使用内置的 h-* 实用程序时，它的渲染非常小。

<div class="hidden sm:block">
    <img
        class="w-full h-20 object-cover object-center"
        src="https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/123373127_3521914557896505_7295974815335315741_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=109&_nc_ohc=DK6qb5zEM4MAX_DFVAe&_nc_tp=15&oh=271f24ef76f786772b436b59b9bd4e6b&oe=5FCC2E33"
    />
</div>

下面是这段代码给出的输出。

任何关于如何减小尺寸而又不使其变形为合适的横幅尺寸（大约 200 像素）的帮助将不胜感激。

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

横幅的目标尺寸是多少？通过使用h-20 类，您已经实现了80px high。如果您希望它是全角且大约 200px 高，您可以尝试使用h-48（转换为 12rem），请参阅https://play.tailwindcss.com/FD72cGTIgx

【讨论】：