Image transforms getting applied even when image is smaller than the transform's width I have a detail transform setup and here's my template code:

{% if block.type == 'image' %}
    {% for asset in block.image %}
        &lt;img src="{{ asset.url('detail') }}" alt="{{ asset.title }}" class="{% if block.position in ['left'] %}pull-left{% endif %}"&gt;
    {% endfor %}
{% endif %}


But on the front end it's taking a smaller image and stretching it and it's become distorted. If I remove 'detail' from the url() parameter it's fine.

Here's what my Detail Transform looks like:



Any thoughts?

It also looks like all transforms are doing the same thing as well. So it's not just related to the detail transform.
I think you're confusing the "Width" setting to mean "Max Width", which it doesn’t. The image will get sized to match your transform's Width setting, regardless of whether it's bigger or smaller than that width beforehand.

If you want to conditionally apply the transform, only if it's larger than the transform's width, you can do this:

{% if asset.width &gt; asset.getWidth('detail') %}
    {% do asset.setTransform('detail') %}
{% endif %}

&lt;img src="{{ asset.url }}" alt="{{ asset.title }}" class="{% if block.position in ['left'] %}pull-left{% endif %}"&gt;