我们如何使用TailwindCSS按比例缩放图像，使其始终适合于视口？
我们如何使用TailwindCSS按比例缩放图像，使其始终适合于视口？
提问于 2022-10-03 14:37:07
我们希望使用TailwindCSS按比例缩放图像(即，在不改变高宽比的情况下)，使图像完全可见于“折叠上方”、水平和垂直中心，并且在图像和窗口两侧之间具有可配置的填充量。
例如，假设我们有一些类似于以下(顺风游乐场)的代码：
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />
<html lang="en" class="min-h-screen bg-gray-50">
<body class="min-h-screen">
<div class="flex flex-col items-center justify-center">
<div class="flex min-h-screen sm:px-12 py-8">
<img class="h-auto max-w-full drop-shadow-md sm:rounded-md" src="https://via.placeholder.com/1500x2500" alt="" />
</div>
</div>
</body>
</html>
在这里，图像需要调整大小，使其高度不大于可用屏幕。此外，应该在图像和屏幕的两侧之间填充。(可以忽略sm断点；对于大屏幕来说，这更重要。)
理想情况下，这将实现仅使用CSS (特别是尾风)，但如果必要的话，JavaScript是一个选项。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-03 14:43:44
在父级上对.h-screen使用img。然后在您的图像上使用.object-scale-down与max-h-full和m-auto。
顺风游戏。
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />
<html lang="en" class="bg-gray-50">
<body>
<div class="flex justify-center sm:px-12 p-8 h-screen">
<img class="object-scale-down max-h-full drop-shadow-md rounded-md m-auto" src="https://via.placeholder.com/1500x2500" alt="" />
</div>
</body>
</html>
Stack Overflow用户
发布于 2022-10-07 05:35:24
我希望这是你要找的。
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />
<html lang="en" class="min-h-screen bg-gray-50">
<body class="min-h-screen">
<div class="flex flex-col items-center justify-center">
<div class="flex min-h-screen h-screen">
<img class="h-auto object-contain max-w-full drop-shadow-md rounded-md" src="https://via.placeholder.com/1500x2500" alt="" />
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73937028
复制相关文章
相似问题
腾讯云开发者
