Code block image fill

Hi All,

I'm a bit stuck with something I'm hoping has a solution that I just can't find. I'm trying to place a code block which contains an image and I'd like for the image to fill the code block, with the same behaviour you'd get from using an image block and setting it to fill, so that no matter what size I make the block, the image would completely fill it. The image will fit the block width but never scales to also fill the height, and nothing I've tried seems to make this work without having to predetermine the height.

I've attached a screenshot of what I mean, where the block on the left is my code block and the block on the left is an image block set to "fill".

Below is the HTML and relavent CSS for the code block:

HTML

<div class="video-portfolio-item">
  <div class="video-container">
    <img src="https://static.vecteezy.com/system/resources/thumbnails/016/763/996/small_2x/sample-text-button-sample-sign-icon-label-sticker-web-buttons-vector.jpg" alt="alt text">
    <div class="video-title">
      <span>Video Title</span>
    </div>
    <div class="video-overlay">
      <div class="video-description">
        Description here<br>
        <a href="https://www.example.com/link">Example link</a>.
      </div>
      <div class="play-indicator">
        <svg viewBox="0 0 24 24" width="48" height="48">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
    </div>
    <a href="#lightbox_https://vimeo.com/examplelink" class="video-link" aria-label="Play video"></a>
  </div>
</div>

CSS

.video-portfolio-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title box styling */
.video-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: white;
  padding: 8px 16px;
  z-index: 2;
}

.video-title span {
  color: black;
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hover overlay styling */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.video-container:hover .video-overlay {
  opacity: 1;
}

/* Description box styling */
.video-description {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  padding: 12px 16px;
  max-width: 300px;
  font-size: 0.9rem;
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.3s ease;
}

.video-container:hover .video-description {
  transform: translateY(0);
  opacity: 1;
}

.video-description a {
  color: inherit;
  text-decoration: underline;
}

/* Play button indicator */
.play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-container:hover .play-indicator {
  opacity: 1;
}

/* Full clickable area */
.video-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

Any help would be greatly appreciated 🙂

Do you have link to page where you use the code? We can check it easier