自动调整非背景图像的大小以填充容器div

Question

我正在尝试拉伸图像并用图像覆盖填充容器 div，以赋予其圆形效果。如果容器 div 高度大于图像，则会显示背景颜色。无论如何，让图像拉伸以填充 div 而不是截止并显示背景颜色？

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

Answer 1

有

object-fit: cover;

，它的功能与

background-size: cover

类似，但对于具有定义大小的其他元素内的

<img>

元素。我想这就是您正在寻找的。

Answer 2

需要添加

display: block;

如果

object-fit: cover;

没有帮助，请使用

object-fit: 100% 100%;

Answer 3

添加宽度和高度，这对我有用（即使没有

display: block

）。

<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: cover;
        width: 100%;
        height: 100%;
    }
</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>