我该如何解决这个CSS对象适合问题？

Question

我正在尝试在我的React应用程序中使用图像预览功能来上传图像。

我想以正确的比例显示$ mvn compile exec:java [INFO] Scanning for projects... [INFO] [INFO] -----------------------< net.jani-hur:004-timer >----------------------- [INFO] Building 004-timer 1.0 [INFO] --------------------------------[ jar ]--------------------------------- [INFO] [INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ 003-timer --- [INFO] Using 'UTF-8' encoding to copy filtered resources. [INFO] Copying 1 resource [INFO] [INFO] --- maven-compiler-plugin:3.8.1:compile (default-compile) @ 003-timer --- [INFO] Nothing to compile - all classes are up to date [INFO] [INFO] --- exec-maven-plugin:3.0.0:java (default-cli) @ 004-timer --- [ App.main()] BaseMainSupport INFO Using properties from: classpath:application.properties;optional=true [ App.main()] DefaultRoutesCollector INFO No additional Camel XML routes discovered from: classpath:camel/*.xml [ App.main()] DefaultRoutesCollector INFO No additional Camel XML rests discovered from: classpath:camel-rest/*.xml [ App.main()] AbstractCamelContext INFO Apache Camel 3.4.3 (camel-1) is starting [ App.main()] AbstractCamelContext INFO StreamCaching is not in use. If using streams then its recommended to enable stream caching. See more details at http://camel.apache.org/stream-caching.html [ App.main()] InternalRouteStartupManager INFO Route: SaveFileRoute started and consuming from: direct://savefile [ App.main()] InternalRouteStartupManager INFO Route: TimerRoute started and consuming from: timer://exampleTimer [ App.main()] AbstractCamelContext INFO Total 2 routes, of which 2 are started [ App.main()] AbstractCamelContext INFO Apache Camel 3.4.3 (camel-1) started in 0.031 seconds [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE START: [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE START: body = HELLO FROM TIMER! [read #0 - timer://exampleTimer] SaveFileRoute INFO ROUTE END: [read #0 - timer://exampleTimer] TimerRoute INFO ROUTE END: ^C$ ，并根据其容器进行裁剪。

这是JSX：

img

JSX似乎可以正常工作，然后我用<div className="YourProfileImg"> <img id="imagePreview" src={userData.image} /> </div> 来给#imagePreview设置样式：

object-fit

这是应用于YourProfileImg的CSS：

#imagePreview {
  width: 130px;
  height: 130px;
  object-fit: cover;
  object-position: center;
}

但似乎仅适用于某些图像。

例如，此处图像被拉伸。

此处图像未拉伸。

我写的代码不正确还是缺少什​​么？