为什么这段代码中的元素之间有少许空格？

Question

I have made a hover over effect that works on this image, playing a looped video and showing a text overlay when hovered over. There is a small tiny problem with this. The video is just slightly smaller than the base image, meaning there is tiny gaps between them when the image is hovered over and the video plays. I can't quite figure out why, seeing as the css for the video/text overlay is at width:100%. If anyone can see what I'm missing I would greatly appreciate the input. Thank you! (

It's also worth mentioning that this code was written into CARGO.site's (a site building platform) code editor. {Image 4} is in the place of what would ususally be a html img tag. The Javascript might not be relevant but I will include anyway for clarity's sake.

A link to the exact site I'm working on: https://racerpictures.cargo.site/work

<div class="container-1" gid="13">

<a href="https://racerpictures.cargo.site/easy-life-beeswax" class="image-link-1">
<div class="image-1" gid="1">




<div class="overlay-img-1">

<video id="video-1" autoplay="" loop="" class="">
  <source src="https://files.cargocollective.com/c1549988/A002_C018_0922BW_002.mp4" type="video/mp4">
</video>
    <div class="text-1"><h4>EASY LIFE | BEESWAX<br></h4>
<p class="caption-small-1">MUSIC VIDEO</p>


</div>

  </div>
<div class="base-img-1">
{image 4}
</div>
</div>
</a>
</div>

#video-1 {
    display: block;
    width: 100%;
    height: 100%;
    fit-content: inherit;
 

}

.container-1 {
  position: relative;
    width: 100%;
    margin-bottom: 5px;
   
}

.image-1 {
  display: block;
  width: 100%;
  height: inherit;
}

.overlay-img-1 {
  position: absolute;
  top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98.5%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.4);
}

.overlay-img-1:hover {
  opacity: 1;
}

.text-1 {
    width: 100%;

  color: white;
  font-size: 20px;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<script>

$(document).ready(function() {
  $('.video-1').each(function(el){
    var _this = $(this);
    _this.on('mouseover', function(ev) {
 
      _this[0].src += "&autoplay=1";
      ev.preventDefault();

    });
  });
});
</script>

Answer 1

You can add object-fit: cover; to the #video-1 . For browser support: https://caniuse.com/?search=object-fit . Also, fit-content is not a css property.