StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you're simply trying to resize an image, I'd recommend setting <code>width</code> and <code>height</code> of the image with CSS. Here's a quick example:</p> <pre><code>.small-image { width: 100px; height: 100px; } </code></pre> <p>Note that the <code>height</code> and <code>width</code> can also be set using JavaScript. Here's quick code sample:</p> <pre><code>var img = document.getElement("my-image"); img.style.width = 100 + "px"; // Make sure you add the "px" to the end, img.style.height = 100 + "px"; // otherwise you'll confuse IE </code></pre> <p>Also, to ensure that the resized image looks good, add the following css rules to image selector:</p> <ul> <li><a href="http://msdn.microsoft.com/en-us/library/ms530822%28VS.85%29.aspx" rel="nofollow noreferrer"><code>-ms-interpolation-mode: bicubic</code></a>: introduce in IE7</li> <li><a href="https://developer.mozilla.org/En/CSS/Image-rendering" rel="nofollow noreferrer"><code>image-rendering: optimizeQuality</code></a>: introduced in FireFox 3.6</li> </ul> <p>As far as I can tell, all browsers except IE using an bicubic algorithm to resize images by default, so your resized images should look good in Firefox and Chrome.</p> <p>If setting the css <code>width</code> and <code>height</code> doesn't work, you may want to play with a css <code>transform</code>:</p> <ul> <li><a href="https://developer.mozilla.org/en/CSS/-moz-transform#scale" rel="nofollow noreferrer"><code>-moz-transform: scale(sx[, sy])</code></a></li> <li><a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html" rel="nofollow noreferrer"><code>-webkit-transform:scale(sx[, sy])</code></a></li> </ul> <p>If for whatever reason you <em>need</em> to use a canvas, please note that there are two ways an image can be resize: by resizing the canvas with css or by drawing the image at a smaller size.</p> <p>See <a href="https://stackoverflow.com/questions/1977741/resizable-canvas-jquery-ui/">this question</a> for more details.</p> <p>Hope this helps!</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