时间戳

首页 > 解决方案 > Reactjs 在保持正确纵横比的同时调整图像大小

javascript - Reactjs 在保持正确纵横比的同时调整图像大小

问题描述

我正在使用 create-react-app 开发 PWA。我正在尝试创建一个函数来上传图像，并将它们显示在具有特定界限的 div 中。我已经在这个平台上搜索了可能的答案，但一直在寻找与 react-native 相关的解决方案。

当我试图在父 div 中调整图像时，图像要么被拉伸以适应 div 的比例，要么完全忽略 div 的边界并增加它的大小。

假设我有以下 div 和图像：

    <div
      style={{
        height: "60vh",
        width:  "100%",
      }}
    >
      <img src={item.image}/>
    </div>

如何调整图像大小以适应父 div 的范围，同时保持该图像的正确纵横比，使其在 android 和 iOS 设备上看起来不会被拉伸？因为有许多不同的手机和相机，图像可以有不同的纵横比。

任何帮助表示赞赏

标签： javascripthtmlcssreactjs

解决方案

推荐阅读