Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T15:29:00.337Z
Answers.Text: I forget about being able to use math in these situations. Still, would be nice to see percentage values in the CP.
Answers.UserDisplayName: Stuart McCoy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T16:16:58.703Z
Answers.Text: Added to The List.
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T17:45:20.473Z
Answers.Text: 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.
Answers.UserDisplayName: Stuart McCoy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T17:54:57.030Z
Answers.Text: 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.
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T18:48:06.547Z
Answers.Text: 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/
Answers.UserDisplayName: Jérôme Coupé
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-15T15:22:06.440Z
Answers.LastActivityDate: 2014-07-15T18:51:22.613Z
Answers.LastEditDate: 2014-07-15T18:51:22.613Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-07-30T21:14:49.763Z
Comments.Text: OT: Stuart, did you solve your `striptags` problem? (Sorry if I write here, will delete the comment later!)
Comments.UserDisplayName: carlcs
Tags: <image-transforms>
Title: Is it possible to use percentage values for width and height in image transforms?
ThreadText: # 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: username_0, 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) %}
  
      <img src="{{ halfUrl }}" srcset="{{ image.url }} 2x" width="{{ half.width }}" height="{{ half.height }}">
  
  {% 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/  
  
  ---
  
  