Zoomed in Image in Wagtail - wagtail

Question

I am trying to display a picture using Wagtail but always end up having it zoomed. I tried following the latest documentation and use fill in association with crop. Nothing works:
The component :
{% load wagtailimages_tags %}
/// the challenging part, I tried all kind of dimensions, with or without c
{% image value.illustration fill-300x600-c100 as cover %}
<div class="grid grid-cols-1 sm:grid-cols-2" {% if value.bg_color %}style='background:{{ value.bg_color }} !important;'{% endif %}>
<div class="text-center py-20 px-4 inline-block bg-center
{% if value.position != '0' %}
sm:hidden
{% endif %}
"
style='background-image:url("{{ cover.url }}");'>
</div>
<div class='text-center py-20 px-6 sm:px-12 md:px-12 lg:px-18 xl=px-24'>
{% if value.over_title %}
<h2 class="text-base font-semibold text-redfuf-900 tracking-wide uppercase" >
{{ value.over_title }}
</h2>
{% endif %}
<p class="mt-1 text-xl font-extrabold text-gray-900 pb-6 sm:text-xl sm:tracking-tight lg:text-2xl"
{% if value.text_color %}style='color:{{ value.text_color }} !important;'{% endif %}>
{{ value.title }}
</p>
{% if value.caption %}
<div class="max-w-7xl mx-auto pb-6 px-4 text-justify sm:pb-12 px-0 lg:px-8">
{{ value.caption }}
</div>
{% endif %}
{% if value.CAT_link or value.snippet_cta %}
<a {% if value.CAT_link %}href='{{ value.CAT_link }}'{% elif value.snippet_cta %}href='{{ value.snippet_cta }}'{% endif %} {% if value.CAT_blank %}target='_blank'{% endif %}>
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-bluefuf-600 hover:bg-bluefuf-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bluefuf-900">
{{ value.CAT_title }}
</button>
</a>
{% endif %}
</div>
<div class="text-center py-20 px-4 hidden bg-cover
{% if value.position == '1' %}
sm:inline-block
{% endif %}
"
style='background-image:url("{{ cover.url }}");'>
</div>
</div>
The picture (for example, so in this case 269x540):
and the result:
Thanks a lot in advance for your help

Answer 1

I'd guess that you need to remove the bg-cover class from your <div> element, but without seeing your full CSS setup it's only a guess.
fill-300x600 on the {% image %} tag will generate an image file of maximum resolution 300x600, but since your original image is only 269x540 (and the {% image %} tag never scales an image up) the resulting image file will remain at 269x540.
You're then passing that image as a CSS background-image, which means that unlike an <img> tag where you're explicitly specifying a width and height in the HTML, it's up to the browser (and the rest of the CSS rules) to determine what size to render it at.
With no other CSS rules in place, the browser would default to rendering the image at its native 269x540 resolution, and tiling that across the element it's applied to. However, if your element has background-size: cover applied to it, the image will be resized to cover the whole element, and since the element is wider than 269 pixels, it's zooming the image. Judging from the name, I assume the bg-cover class is adding that background-size: cover rule.