如何在React js中识别图像是纵向还是横向图像？

Question

如何使用 React.js 动态识别图像是纵向还是横向。本指南介绍了分析图像尺寸和应用条件样式的步骤，以确保您的应用程序无缝适应不同的图像格式。

我尝试使用 React.js 计算图像的宽度和高度，并根据方向（纵向或横向）有条件地应用样式。我希望该组件能够准确检测图像方向并动态调整样式以适应布局要求。

Answer 1

 <Image
    src={img.png}
    onLoad={(event) => {
        const imgElement = event.target as HTMLImageElement;
        const isPortrait = imgElement.naturalHeight > imgElement.naturalWidth;
                 if (isPortrait) {
                        imgElement.style.objectFit = 'cover'
                 } else {
                            imgElement.style.objectFit = 'contain'
                 }
  }}
 />

在图像元素中，您可以使用onload属性来检查naturalHeight是否大于naturalWidth。基于此条件，您可以动态更改样式，确保布局适当适应。