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

Question

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

<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 像素），我们将不胜感激。

标签： htmlcsstailwind-css

Answer 1

您的横幅的目标尺寸是多少？通过使用h-20该类，您将其设置为80px high。如果您希望它是全宽且高约 200 像素，您可以尝试h-48（转换为 12rem），请参阅https: //play.tai​​lwindcss.com/FD72cGTIgx