<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Codigo Manso &#187; aspect ratio</title>
	<atom:link href="http://www.codigomanso.com/en/tag/aspect-ratio/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codigomanso.com</link>
	<description>Programación, informática y tecnología</description>
	<lastBuildDate>Sun, 21 Aug 2011 10:54:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Keeping aspect ratio when scaling an image</title>
		<link>http://www.codigomanso.com/en/2009/03/escalar-una-imagen-manteniendo-el-aspecto/</link>
		<comments>http://www.codigomanso.com/en/2009/03/escalar-una-imagen-manteniendo-el-aspecto/#comments</comments>
		<pubDate>Fri, 27 Mar 2009 20:10:52 +0000</pubDate>
		<dc:creator>Pau Sanchez</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[aspect ratio]]></category>
		<category><![CDATA[aspecto]]></category>
		<category><![CDATA[escalar]]></category>
		<category><![CDATA[imagenes]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.codigomanso.com/es/?p=621</guid>
		<description><![CDATA[Scaling an image to keep it under specific bounds, for visualizing purposes is a common task, but it&#8217;s even better if we can scale the image without deforming it. In this cases we have to scale the image and keep it&#8217;s original aspect ratio.
Nowadays there are thousands of libraries for any general purpose language that [...]]]></description>
			<content:encoded><![CDATA[<p>Scaling an image to keep it under specific bounds, for visualizing purposes is a common task, but it&#8217;s even better if we can scale the image without deforming it. In this cases we have to scale the image and keep it&#8217;s original aspect ratio.</p>
<p>Nowadays there are thousands of libraries for any general purpose language that can perform the scaling of an image. The question is ¿which are the new width and height for the image?</p>
<p>Following there is this simple code, that have been tested using javascript, but should work in PHP, Python, Java, Perl, C, or whatever language you want to try <img src='http://www.codigomanso.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>w <span style="color: #339933;">&lt;</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  h <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>h <span style="color: #339933;">*</span> maxWidth<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> w<span style="color: #339933;">;</span>
  w <span style="color: #339933;">=</span> maxWidth<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
  w <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>w <span style="color: #339933;">*</span> maxHeight<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> h<span style="color: #339933;">;</span>
  h <span style="color: #339933;">=</span> maxHeight<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><b>w</b> represents the image width</p>
<p><b>h</b> represents the image height</p>
<p><b>maxWidth</b> represents the maximum width boundary where the image is going to be embedded</p>
<p><b>maxHeight</b> represents the maximum height boundary where the image is going to be embedded</p>
<p>As a final example, although is a copy-paste, imagine you have an image of size (w, h) and you have to fit it in an area of 640&#215;480:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">var maxWidth <span style="color: #339933;">=</span> <span style="color: #cc66cc;">640</span>, maxHeight <span style="color: #339933;">=</span> <span style="color: #cc66cc;">480</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>w <span style="color: #339933;">&gt;</span> maxWidth <span style="color: #339933;">||</span> h <span style="color: #339933;">&gt;</span> maxHeight<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>w <span style="color: #339933;">&lt;</span> h<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    h <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>h <span style="color: #339933;">*</span> maxWidth<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> w<span style="color: #339933;">;</span>
    w <span style="color: #339933;">=</span> maxWidth<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    w <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>w <span style="color: #339933;">*</span> maxHeight<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> h<span style="color: #339933;">;</span>
    h <span style="color: #339933;">=</span> maxHeight<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.codigomanso.com/en/2009/03/escalar-una-imagen-manteniendo-el-aspecto/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
	</channel>
</rss>

