1

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 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>

enter image description here

Aaron Blomberg
  • 77
  • 10

2 Answers2

2

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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • you can see in the code above i tried that and it's not working :/ – Aaron Blomberg Feb 22 '22 at 00:00
  • the content in the hero varies upon each page so that's what's causing the issue. when the content on the left breaks out of the defined height i need that image to adjust accordingly. if i had a clearly defined height that would be the clear solution but unfortunately that's not going to work here. – Aaron Blomberg Feb 22 '22 at 00:15
  • `object-fit: cover;` should be on the *image*, not on its container. – Johannes Feb 22 '22 at 00:26
  • i've updated my code above and that still didn't do the trick unfortunately :/ – Aaron Blomberg Feb 22 '22 at 00:34
0

Need add display: block;

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

ValentynDi
  • 1
  • 1