Why doesn't the webp image adapt to the height of the parent block?

Question

css

.item-product__preview {
position: relative;
&:before {
content: "";
display:block;
padding top: 92%
}
&-image {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
display:flex;
justify-content: center;
align-items: center;
img {
display: block;
max-width: 100%
max-height: 100%
}
}
I don’t know how correct this is, but I tried to write display: block; max-height: 100% for picture but nothing helps. If you remove the picture tag and add the image only through img, then everything works as it should.