Blogger post thumbnails are not showing full-sized

Question

Hi, Blogger post thumbnails are not showing full-sized. Like this thumbnail it comes cropped automatically.

see this pic

the CSS of the thumbnail :

.entry-thumb, .author-avatar{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease,filter 0s ease;
}

HTML :

<div class="blog-posts hfeed index-post-wrap grid2-items">
<article class="blog-post hentry index-post post-0">
<a class="entry-image-wrap is-image" href="https://www.less1min.com/2022/03/hey.html" title="Hey"><span class="entry-thumb lazy-ify" data-image="https://blogger.googleusercontent.com/img/a/AVvXsEgR2UC1vssFRqQfiPv1ooU7Qg76IYEJkq21L81x0Xf9dX5pBcOBn0hZ59eh9soyXAV_w8PoWbZBLhZB440ljEebit-tsH-i6HDrTzCJYAirIrA7pF7SBKVnzyZ305p3PXwqjDvYQyYSTPokBoj7bxvkG5FonnGo9MUg55DszbffAv5PPRPjPFh3TZ9g=w72-h72-p-k-no-nu" style="background-image:url(https://blogger.googleusercontent.com/img/a/AVvXsEgR2UC1vssFRqQfiPv1ooU7Qg76IYEJkq21L81x0Xf9dX5pBcOBn0hZ59eh9soyXAV_w8PoWbZBLhZB440ljEebit-tsH-i6HDrTzCJYAirIrA7pF7SBKVnzyZ305p3PXwqjDvYQyYSTPokBoj7bxvkG5FonnGo9MUg55DszbffAv5PPRPjPFh3TZ9g=w259-h167-p-k-no-nu)"></span>
</a>
<div class="entry-header">
<h2 class="entry-title"><a class="entry-title-link" href="https://www.less1min.com/2022/03/hey.html" rel="bookmark" title="Hey">Hey</a></h2>
<p class="entry-excerpt excerpt">
</p>
<div class="entry-meta">
<span class="entry-time mi"><time class="published" datetime="2022-03-29T14:49:00+03:00">مارس 29, 2022</time></span>
</div>
</div>
</article>
</div>

I want to show the full size of the image in the thumbnail.

Answer 1

Change this background-size: cover; to background-size: fill;