<p>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.</p>

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

<pre class="lang-twig prettyprint-override"><code>{% 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;
</code></pre>

CC BY-SA 3.0
2014-10-09T16:41:24.487Z
Ahh I see! Seems kind of unnecessary to me to have to do that though. Wouldn't it make more sense for the Transforms to be "smart" about that? Or possibly give us a MaxWidth option?
Mark Busnelli Jr
CC BY-SA 3.0
2014-10-09T16:43:20.497Z
I don't thinks so. The above code is easy enough to add, and I think most people want transform's to be a way of unifying image sizes, even if that means stretching them up in some cases.
Brandon Kelly
CC BY-SA 3.0
2014-10-09T17:11:45.320Z
Hmm okay. Agree to disagree then it is :D Thanks for the help!
Mark Busnelli Jr
CC BY-SA 3.0
2015-12-28T03:50:09.783Z
I use max width and max height quite a bit on my EE sites, so I personally would find this functionality useful.
kmgdev
CC BY-SA 3.0
2015-12-31T14:48:18.543Z
@kgrote You can vote for something like that here: http://feedback.buildwithcraft.com/forums/285221-feature-requests/suggestions/10007034-image-transforms-have-option-not-to-scale-up
Brandon Kelly
CC BY-SA 3.0
2014-10-09T16:35:03.690Z
2014-10-09T16:46:05.780Z
2014-10-09T16:46:05.780Z
Brandon Kelly
<p>I have a <code>detail</code> transform setup and here's my template code:</p>

<pre class="lang-twig prettyprint-override"><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 %}
</code></pre>

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

<p>Here's what my Detail Transform looks like:</p>

<p><img src="https://i.sstatic.net/NDQn7.png" alt="enter image description here"></p>

<p>Any thoughts?</p>

<p>It also looks like all transforms are doing the same thing as well. So it's not just related to the <code>detail</code> transform.</p>

CC BY-SA 3.0
2014-10-09T16:30:51.700Z
To clarify, are you saying if the image is less than 690px width you don't want the transform to apply?
Peter Tell
CC BY-SA 3.0
2014-10-09T16:31:56.443Z
Yes. I didn't choose "Stretch" so shouldn't the Transform NOT touch images under that width?
Mark Busnelli Jr
CC BY-SA 3.0
2014-10-09T16:35:42.973Z
Pretty sure no. I think without further rules in the markup it's going to try and set it at the dimensions you specify even if it's not "Sretched" (Which will fill with the whole image, not crop). Cropping will do just that, crop to a dimension that you specify. I'll put an answer below for conditional.... awww. Brandon beat me to it. CURSE YOU BRANDON AND YOUR INFINITE INTERNET POINTS!
Peter Tell
CC BY-SA 3.0
2014-10-09T16:47:31.813Z
@PeterTell You had the advantage there too - that was typed from my phone while feeding the baby a bottle :)
Brandon Kelly
CC BY-SA 3.0
2014-10-09T16:51:20.870Z
@BrandonKelly Oh you had to go there, didn't you. ;-)
Peter Tell
CC BY-SA 3.0
2014-10-09T17:10:47.680Z
possible duplicate of [Prevent Asset Transforms from scaling Image past 100%](http://craftcms.stackexchange.com/questions/1436/prevent-asset-transforms-from-scaling-image-past-100)
carlcs
<assets>
Image transforms getting applied even when image is smaller than the transform's width
# Image transforms getting applied even when image is smaller than the transform's width

(Asked by: username_0 on 2014-10-09)

I have a detail transform setup and here's my template code:
{% if block.type == 'image' %}
    {% for asset in block.image %}
        
    {% 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.

**Tags:** assets
> **Comments:**
> **username_1**: To clarify, are you saying if the image is less than 690px width you don't want the transform to apply?  
> **username_0**: Yes. I didn't choose "Stretch" so shouldn't the Transform NOT touch images under that width?  
> **username_1**: Pretty sure no. I think without further rules in the markup it's going to try and set it at the dimensions you specify even if it's not "Sretched" (Which will fill with the whole image, not crop). Cropping will do just that, crop to a dimension that you specify. I'll put an answer below for conditional.... awww. Brandon beat me to it. CURSE YOU BRANDON AND YOUR INFINITE INTERNET POINTS!  
> **username_2**: @PeterTell You had the advantage there too - that was typed from my phone while feeding the baby a bottle :)  
> **username_1**: @BrandonKelly Oh you had to go there, didn't you. ;-)  
> **username_3**: possible duplicate of [Prevent Asset Transforms from scaling Image past 100%](http://craftcms.stackexchange.com/questions/1436/prevent-asset-transforms-from-scaling-image-past-100)  

---

## 1 answers

### Answer by username_2 on 2014-10-09. Score: 11 | Accepted answer

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 > asset.getWidth('detail') %}
    {% do asset.setTransform('detail') %}
{% endif %}

> **Comments:**
> **username_0**: Ahh I see! Seems kind of unnecessary to me to have to do that though. Wouldn't it make more sense for the Transforms to be "smart" about that? Or possibly give us a MaxWidth option?  
> **username_2**: I don't thinks so. The above code is easy enough to add, and I think most people want transform's to be a way of unifying image sizes, even if that means stretching them up in some cases.  
> **username_0**: Hmm okay. Agree to disagree then it is :D Thanks for the help!  
> **username_4**: I use max width and max height quite a bit on my EE sites, so I personally would find this functionality useful.  
> **username_2**: @kgrote You can vote for something like that here: http://feedback.buildwithcraft.com/forums/285221-feature-requests/suggestions/10007034-image-transforms-have-option-not-to-scale-up  

---

