Browse Source

fix: show full live video without cropping

Use object-fit: contain so the monitor live frame keeps the whole picture.
main
xiaosi 2 weeks ago
parent
commit
3c76b395c4
  1. 2
      src/styles/prototype.css

2
src/styles/prototype.css

@ -137,7 +137,7 @@ svg:not(.t-icon){ width: 18px; height: 18px; fill: none; stroke: currentColor; s
.play-control:disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; } .play-control:disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; }
.play-control svg{ width: 17px; } .play-control svg{ width: 17px; }
.video-frame.streaming .camera-scene{ animation: camera-live 4s ease-in-out infinite alternate; } .video-frame.streaming .camera-scene{ animation: camera-live 4s ease-in-out infinite alternate; }
.video-frame > video{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; border: 0; }
.video-frame > video{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #000; border: 0; }
.video-frame.playing .camera-scene{ display: none; } .video-frame.playing .camera-scene{ display: none; }
.video-frame.playing .play-control{ opacity: 0; pointer-events: none; transition: opacity .15s ease; } .video-frame.playing .play-control{ opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.video-frame.playing:hover .play-control{ opacity: 1; pointer-events: auto; } .video-frame.playing:hover .play-control{ opacity: 1; pointer-events: auto; }

Loading…
Cancel
Save