Auto-resize non-background image to fill container div-CodePudding

I'm trying to have an image stretch and fill a container div with an image overlay to give it a rounded effect. If the container div height is larger than the image it shows the background color. Anyway to have that image stretch to fill the div rather that cut-off and show 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 >

<div >

    <img  src="<?php echo get_template_directory_uri(); ?>/images/hero/hero-overlay-<?php the_field( 'color' ); ?>.svg" alt="Hero overlay" />

    <div >
        <?php $image = get_field( 'image' ); ?>
        <?php if ( $image ) : ?>
            <img  src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
        <?php endif; ?>
    </div>
    
</div>

</div>

CodePudding user response：

There's object-fit: cover;, , which does something similar as background-size: cover, but for <img> elements inside other elements that have a defined size. I suppose that's what you are looking for.

CodePudding user response：

Need add display: block;

If object-fit: cover; does not help, use object-fit: 100% 100%;