title: How to correctly scale the featured image in Jekyll blog excerpt?
body: <p>I am using Jekyll to collect blog excerpts on one page. One problem is that the featured images in the excerpt are usually stretched from the original ones. I think it is due to the default setting of the featured image in the excerpt is always fixed to 300px * 100px size. How to scale the featured images in stead of using a fixed size in the excerpt while making sure the size of the image is not larger than the default size? </p>
  
  <p>In details, I use the following code to generate the blog excerpt in my <code>post.html</code> template:</p>
  
  <pre><code>&lt;header&gt;&lt;h4&gt;&lt;a href="{{ post.url }}"&gt;{{ post.title }}&lt;/a&gt;&lt;/h4&gt;&lt;/header&gt;
  &lt;p&gt;&lt;span&gt;{{ post.subtitle }}&lt;/span&gt;&lt;/p&gt;
  &lt;p style="font-style:italic"&gt; {{ post.date | date_to_string }}&lt;/p&gt;
  {% if site.pageviews %}
  &lt;p style="font-style:italic"&gt; pageviews: {{ post.pageviews }} &lt;/p&gt;
  {% endif %}
  &lt;article&gt;
  &lt;div class="excerpt"&gt;
  {{ post.content | strip_html | truncate:400  }}
  &lt;/article&gt;
  </code></pre>
  
  <p>This function automatically grabs the first image in the blog as the featured image and shows it in the excerpt paragraphs. I cannot find where the size of featured images are controlled in Liquid... Thanks.</p>
  
  <p><strong>Update on May 31st</strong>:
  The repo is <a href="https://github.com/ICIQ/iciq.github.io" rel="nofollow">here</a>. See the most recent post for the image and excerpt of image at <a href="http://iciq.github.io" rel="nofollow">http://iciq.github.io</a>. I fixed this problem by defining the "scale" property in stead of the width property in the css style of the image in the post. But still open to more elegant solutions. </p>