如何在顺风中自动调整div中的内容大小？
如何在顺风中自动调整div中的内容大小？
提问于 2021-09-03 18:49:06
我的代码目前是这样的：
<div class="container h-auto">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="h-autho w-auto" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-autho w-auto" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
其中图像超出了div的宽度。我希望图像能够根据div中的内容自动减小其大小，以便它们始终适合div。有可能吗？
回答 1
Stack Overflow用户
发布于 2021-09-03 21:30:34
我给你提了三个建议。
前两个更具体地针对2个图像。使它们分别与grid-cols-2和w-1/2大小相同
最后一种方法适用于任意数量的图像，应用于flex容器的所有childs的flex-grow使它们的宽度相同。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container h-auto mb-4">
<div class="grid grid-cols-2 border-8 border-red-900 w-56 h-auto">
<img class="h-auto w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-auto w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="w-1/2" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="w-1/2" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<div class="flex-grow">
<img class="w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
</div>
<div class="flex-grow">
<img class="w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69049443
复制相关文章
相似问题
腾讯云开发者
