<p>It’s possible to do this from your templates:</p>

<pre><code>{% for image in entry.myAssetsField %}

    {% set half = {
        width: (image.width/2)|round,
        height: (image.height/2)|round
    } %}

    {% set halfUrl = image.getUrl(half) %}

    &lt;img src="{{ halfUrl }}" srcset="{{ image.url }} 2x" width="{{ half.width }}" height="{{ half.height }}"&gt;

{% endfor %}
</code></pre>

CC BY-SA 3.0
2014-07-15T15:29:00.337Z
I forget about being able to use math in these situations. Still, would be nice to see percentage values in the CP.
Stuart McCoy
CC BY-SA 3.0
2014-07-15T16:16:58.703Z
Added to The List.
Brandon Kelly
CC BY-SA 3.0
2014-07-15T17:45:20.473Z
Great, because I just realized that when this gets mixed with Matrix blocks it gets even more complicated. It works but it's just a mess of variables that make template code harder to parse for bugs.
Stuart McCoy
CC BY-SA 3.0
2014-07-15T17:54:57.030Z
Might want to consider moving chunks of code to separate [includes](http://twig.sensiolabs.org/doc/tags/include.html) or [macros](http://twig.sensiolabs.org/doc/tags/macro.html). Feel free to use those features liberally – there’s no noticeable performance penalty.
Brandon Kelly
CC BY-SA 3.0
2014-07-15T18:48:06.547Z
Just wanted to chime in to say that, if you are not doing art direction, you don't needs `<picture>`. An image with srcset and size is enough: http://picture.responsiveimages.org/#when-to-use this article helps a lot with keeping your sanity http://ericportis.com/posts/2014/srcset-sizes/
Jérôme Coupé
CC BY-SA 3.0
2014-07-15T15:22:06.440Z
2014-07-15T18:51:22.613Z
2014-07-15T18:51:22.613Z
Brandon Kelly
<p>I'm working on creating an image transform to handle retina images. I upload the 2x assets and need an image transform to create my images at 50% their original size. Since images on the site can be varying widths and heights I am currently forced to create a new image transform for each image ratio. Percentage values would cut this down to a single image transform for everything.</p>

CC BY-SA 3.0
2014-07-30T21:14:49.763Z
OT: Stuart, did you solve your `striptags` problem? (Sorry if I write here, will delete the comment later!)
carlcs
<image-transforms>
Is it possible to use percentage values for width and height in image transforms?
# Is it possible to use percentage values for width and height in image transforms?

(Asked by: username_0 on 2014-07-15)

I'm working on creating an image transform to handle retina images. I upload the 2x assets and need an image transform to create my images at 50% their original size. Since images on the site can be varying widths and heights I am currently forced to create a new image transform for each image ratio. Percentage values would cut this down to a single image transform for everything.

**Tags:** image-transforms
> **Comments:**
> **username_1**: OT: Stuart, did you solve your `striptags` problem? (Sorry if I write here, will delete the comment later!)  

---

## 1 answers

### Answer by username_2 on 2014-07-15. Score: 5 | Accepted answer

It’s possible to do this from your templates:
{% for image in entry.myAssetsField %}

    {% set half = {
        width: (image.width/2)|round,
        height: (image.height/2)|round
    } %}

    {% set halfUrl = image.getUrl(half) %}

    

{% endfor %}

> **Comments:**
> **username_0**: I forget about being able to use math in these situations. Still, would be nice to see percentage values in the CP.  
> **username_2**: Added to The List.  
> **username_0**: Great, because I just realized that when this gets mixed with Matrix blocks it gets even more complicated. It works but it's just a mess of variables that make template code harder to parse for bugs.  
> **username_2**: Might want to consider moving chunks of code to separate [includes](http://twig.sensiolabs.org/doc/tags/include.html) or [macros](http://twig.sensiolabs.org/doc/tags/macro.html). Feel free to use those features liberally – there’s no noticeable performance penalty.  
> **username_3**: Just wanted to chime in to say that, if you are not doing art direction, you don't needs `<picture>`. An image with srcset and size is enough: http://picture.responsiveimages.org/#when-to-use this article helps a lot with keeping your sanity http://ericportis.com/posts/2014/srcset-sizes/  

---

