如何在 TailWind 中设置与窗口大小成比例的高度？
[英]How can I set the height proportionate to the window size in TailWind?
问题描述
我正在尝试使用图像创建横幅。 我遇到的问题是，当我在 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 像素）的帮助将不胜感激。
1 个解决方案
解决方案1
1 2020-11-03 21:50:43
您的横幅广告的目标尺寸是多少？ 通过使用h-20类，您已将其设置为80px high 。 如果您希望它是全宽且高约 200 像素，则可以尝试使用h-48 （转换为 12rem），请参阅https://play.tailwindcss.com/FD72cGTIgx
CSS：如何根据屏幕/窗口大小设置宽度和高度？
[英]CSS: How to set the width and height dependent on the screen/window size?
如何设置元素的宽度和高度，但只能使用较大的一个，具体取决于屏幕尺寸？
[英]How can I set width & height of element, but only use whichever is greater depending on screen size?
仅使用CSS和HTML，如果将窗口缩小到特定大小，如何设置填充为20％的div更改为0％？
[英]Using only CSS & HTML, how can I set a div with a padding of 20% to change to 0% if the window is reduced to a specific size?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.