使屏幕截图适合窗口大小（全屏）

Question

我正在使用 react-webcam 拍摄照片（屏幕截图）并将该屏幕截图设置为窗口大小。通过下面发布的代码，我可以使屏幕截图适合某些设备（Galaxy S5 模拟器 (360x640) 和我的 PC (1707x956px)）的窗口的完整大小。但是，它不适用于 iPad (768x1024)/iPhone/Pixel 2 模拟器。使用样式属性（请参见下面的代码），我可以使相机（在捕获之前）完全适合任何设备上的窗口大小。为什么我不能对截图做同样的事情？

这里是沙盒的链接：https://codesandbox.io/s/8to8e?file=/src/App.js

这是我的网络摄像头组件：

        <Webcam
          audio={false}
          screenshotFormat="image/webp"
          videoConstraints={{
            height: this.state.screenHeight,
            width: this.state.screenWidth
          }}
          minScreenshotHeight={this.state.screenHeight}
          minScreenshotWidth={this.state.screenWidth}
          ref={this.setRef}
          style = {{width: "100%", height: "100%", position: "absolute", left: "50%", marginLeft: "-50%", objectFit: "cover", objectPosition: "center"}}
        />

任何帮助将不胜感激！

Answer 1

我目前的项目也使用 react-webcam。我在 index.css 中为 video 标签添加了一个样式类。

video {
  max-width: 100%;
  object-position: center;
  object-fit: cover!important;
}