I'm attempting to create a rounded effect on an image within a container div by having the image stretch and fill the entire space. However, if the container div's height is larger than the image, it displays the background color instead of stretching the image. Is there a way to make the image stretch to fill the div completely without cutting off and showing the background color?
<style>
.hero-interior-banner-image {
height: auto;
position: relative;
}
.interior-hero-overlay {
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
width: 60px;
bottom: 0px;
height: 100%;
object-fit: cover;
}
.hero-tertiary img {
display: block;
/*object-fit: 100% 100% !important;*/
object-fit: cover !important;
}
</style><div class="col-12 col-xl-6 px-0">
<div class="d-none d-xl-block hero-interior-banner-image float-end">
<img class="interior-hero-overlay" src="<?php echo get_template_directory_uri(); ?>/images/hero/hero-overlay-<?php the_field( 'color' ); ?>.svg" alt="Hero overlay" />
<div class="hero-tertiary">
<?php $image = get_field( 'image' ); ?>
<?php if ( $image ) : ?>
<img class="img-fluid hero-tertiary" src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
<?php endif; ?>
</div>
</div>
</div>