Блог

При использовании GTmetrix следующий CSS выдает «Изображения правильного размера», а Google Web.dev не отображает «Отображает изображения с неправильным соотношением сторон»

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

Напротив, GT Metrix не отображает сообщение «Изображения правильного размера», но Web.dev от Google возвращает «Отображает изображения с неправильным соотношением сторон»

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

И, наконец, ни GT Metrix, ни веб-разработчик Google не показывают «Изображения правильного размера» или «Отображает изображения с неправильным соотношением сторон». Однако ширина изображения растекается по горизонтали.

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

Цель состоит в том, чтобы содержать изображение так, чтобы оно не приводило к перепрошивке содержимого. Однако все стили CSS достигают этого, но имеют разные результаты.

Каким должен быть CSS, чтобы такие инструменты, как GT Metrix и Web.dev, были согласованы? Причина, по которой эти инструменты используются в качестве критерия для тестирования качества.