CSS width 100% height auto GTMetrix & Google Web.dev properly size images

问题

When using GTMetrix, the following CSS yields "Properly size images" and Google's Web.dev doesn't display "Displays images with incorrect aspect ratio"

    figure.dhero {
        position: relative;
}
    figure.dhero::after {
        content: '';
        display: block;
        overflow: hidden;
        height: 0;
        width: 100%;
        padding-bottom: 66.5492958%;
}
    figure.dhero > * {
        position: absolute;
        top: 0;
        left: 0;
        max-width:100%;
        min-width:100px;
        min-height:100px;
        display: block;
        z-index: 2;
}

In contrast, GT Metrix doesn't display the message "Properly size images" but Google's Web.dev returns "Displays images with incorrect aspect ratio"

    figure.dhero {
        position: relative;
}
    figure.dhero::after {
        content: '';
        display: block;
        overflow: hidden;
        height: 0;
        width: 100%;
        padding-bottom: 66.5492958%;
}
    figure.dhero > * {
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height:100px;
        display: block;
        z-index: 2;
}

And finally, neither GT Metrix nor Google's Web dev shows "Properly size images" or "Displays images with incorrect aspect ratio". The image's width however spills horizontally.

    figure.dhero {
        position: relative;
}
    figure.dhero::after {
        content: '';
        display: block;
        overflow: hidden;
        height: 0;
        width: 100%;
        padding-bottom: 66.5492958%;
}
    figure.dhero > * {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100vw;
        max-height: 100vh;
        display: block;
        z-index: 2;
}

The purpose is to contain the image so that it doesn't result in content reflow. All the CSS styles achieve this however have differing results.

What should the CSS be so that tools such as GT Metrix and Web.dev are consistent? The reason these tools are used as a criteria for quality testing.

来源：https://stackoverflow.com/questions/65376425/css-width-100-height-auto-gtmetrix-google-web-dev-properly-size-images