StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>If an image a user uploads is say 469x358 and the display end picture needs to be or is designed to fit within a 120x80 box for instance. If i resize based upon width the resulting resized image will be 120x92, i could just then fix the height but that will pixelate or squash the image, i could also crop the end off with either imageGD or css overflow hidden.</p> </blockquote> <p>If your image was 358x469 (portrait) and you want to resize it to 120x80 so that the image does not look distorted, here is the math:</p> <pre><code>358/469 = width/80 => width = 358*80/469 = 61px (approx) </code></pre> <p>We had a taller image we'll use maximum height and constrained width. A desired width of 120px means the image is stretched horizontally; with a better algorithm you can only achieve smoothness but you cannot make a squashed/stretched image look normal with a better algorithm.</p> <p>If fitting is required, I suggest that you crop-to-fit of resize-to-fit. You can do this on the server side via GD library/ImageMagick or on the client side using CSS background positioning. If you're using GD, cropping is as simple as resizing the image with negative offsets (somewhat similar to CSS background positioning with negative background-position).</p> <h1>Edit 1</h1> <p>If it is a question of whether to use GD or IM, I'd suggest IM. I am not sure about the quality of output but as far as performance is concerned, IM will outperform GD, specially when you are dealing with high resolution images. In case you prefer GD, the GD library function <code>imagecopyresampled</code> will give you better results compared to <code>imagecopyresized</code> but higher CPU and/or memory usage.</p> <h1>Edit 2</h1> <p>I forgot to mention, I stopped using GD long time ago and switched to <a href="http://phpthumb.sourceforge.net/" rel="nofollow">phpThumb</a>. Takes care of most of the chores. Internally it uses GD and/or IM -- built-in intelligence lets it select the best available method for a given operation.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload