React Image Crop组件如何将展示的图片设置为全屏？

解决方案 #

你遇到的兼容问题是两个原因导致的：

1. objectFit、objectPosition是作用于图片元素的属性，你直接写在ReactCrop组件的style属性上，只会生效在组件的外层容器上，不会作用到内部的img标签，Safari（iPhone端内核）和Chrome对这类属性的继承逻辑不同，因此出现安卓生效iOS失效的情况。
2. 你用的绝对定位+负边距的写法兼容度低，且依赖父元素的尺寸基准，容易出现适配问题。

具体修改步骤：

• 首先确保ReactCrop的所有父级节点（包括html、body、项目根容器、包裹ReactCrop的外层div）都设置为占满视口，避免百分比宽高没有基准：

html, body, #root, .crop-container {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

• 使用ReactCrop提供的imageStyle属性给内部图片设置样式，组件本身的style只控制外层容器尺寸，修改后的组件代码如下：

<div className="crop-container">
  <ReactCrop
    src={src}
    style={{ width: "100%", height: "100%" }}
    imageStyle={{
      width: "100%",
      height: "100%",
      objectFit: "cover",
      objectPosition: "center"
    }}
    crop={crop}
    onImageLoaded={this.onImageLoaded}
    onComplete={this.onCropComplete}
    onChange={this.onCropChange}
  />
</div>

修改后即可适配所有移动端设备的全屏显示需求。

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