How to set height by wrapped div on an image block

Question

I'm writing a custom Gutenberg block. I'm trying to limit an IMG tag to the height of a wrapping div tag that the designer can set. I can do it without the WordPress styles applied, but something is being done that I don't know what do.

<div class="wp-block-give-camp-gc-slider gc-slider" style="background-color:#F6F6F6;color:#000000;border:1px solid #000000" data-milli-sec="4000">
  <div class="gc-slider-items" style="height:300px">
    <div class="wp-block-give-camp-gc-slider-item gc-slider-item">
      <figure class="wp-block-image size-large">
        <img decoding="async" width="1024" height="768"
          src="http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1-1024x768.jpg"
          alt="" class="wp-image-93"
          srcset="http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1-1024x768.jpg 1024w, http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1-300x225.jpg 300w, http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1-768x576.jpg 768w, http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1-1536x1152.jpg 1536w, http://localhost:9139/wp-content/uploads/2023/06/img_4420-1600x1200-1.jpg 1612w"
          sizes="(max-width: 1024px) 100vw, 1024px">
      </figure>
    </div>
  </div>
  <div class="gc-slider-footer has-text-align-center" style="font-size:1rem;padding-top:3px;padding-bottom:3px;border-top-width:1px;border-top-style:solid;border-top-color:#000000">_ of _</div>
</div>

This is what I've tried:

.gc-slider-item > .wp-block-image {
  width: 100%; height: 100%;
}
.gc-slider-item > .wp-block-image > img {
  width: unset; height: unset;
  max-width: 100%; max-height: 100%;
  vertical-align: middle;
}

I'm using WordPress 6.2.2 and 2023 theme.