如何使用Tailwind实现分栏布局图片小视口下仍保持底部对齐

问题根因 #

你当前给图片设置的object-contain属性会保持图片原始宽高比，自动缩放至完整放入容器内，其默认对齐规则为居中对齐，当视口宽度小于1440px时，容器宽度不足以放下图片完整宽度，图片会整体居中显示，底部就会和容器底部产生空隙，出现上浮偏离的问题。

解决方案 #

仅需要修改图片元素的className，增加Tailwind内置的object-bottom类即可，修改后的img代码如下：

<img 
  className="object-contain object-bottom h-screen w-full" 
  src={require('../images/johne_doe.png').default} 
  data-aos="fade-up" 
  alt="John Doe" 
/>

实现逻辑 #

object-bottom对应原生CSS属性object-position: bottom，会强制让缩放后的图片底部始终和容器底部对齐，多余的留白会自动留在图片上方，既不会破坏图片的原始比例，也能实现所有视口下图片底部对齐的效果，无需额外编写自定义CSS。

内容的提问来源于stack exchange，提问作者DennoFreezy