`<img>` 的 TailwindCSS 辅助类

TailwindCSS 提供了几个针对 <img> 标签的辅助类。以下是一些常用的类:

  • object-contain:此类将图像设置为适应容器并保持其长宽比。它将根据需要缩小或扩大图像以确保其适合容器。
  • object-cover:此类将图像设置为覆盖整个容器并保持其长宽比。它将裁剪或根据需要缩小图像以确保其覆盖容器。
  • object-fill:此类将图像设置为填充整个容器而不维护其长宽比。这可能会导致图像被拉伸或压缩以适应容器。
  • object-none:此类将图像设置为其自然大小,没有任何调整大小或裁剪。
  • object-center:此类在其容器内水平和垂直居中图像。
  • object-left:此类将图像在其容器内左对齐。
  • object-right:此类将图像在其容器内右对齐。
  • object-top:此类将图像在其容器内顶部对齐。
  • object-bottom:此类将图像在其容器内底部对齐。

这些类可以与其他 TailwindCSS 类组合使用,以进一步样式化您的图像,例如设置特定的宽度或高度、添加边框或阴影、调整不透明度等。