Last active
May 21, 2016 01:42
-
-
Save shoban/7abbcb06a122374c7b7a85d8bf6c993d to your computer and use it in GitHub Desktop.
Resize image inside viewport to fit according to your preference. Plain load the html file to display help.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <style type="text/css" media="screen"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #viewport { | |
| position: fixed; | |
| left: 0; right: 0; top: 0; bottom: 0; | |
| background-color: #ffffff; | |
| } | |
| #image { | |
| position: relative; | |
| } | |
| #help { | |
| margin: 40px auto; | |
| width: 500px; | |
| display: none; | |
| } | |
| #help p,dd,dl,dt,ul,li { | |
| margin: 10px; | |
| } | |
| #help dt { | |
| font-family: monospace; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| } | |
| #help dd { | |
| margin-left: 20px; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> | |
| <script> | |
| function getParameterByName(name, url) { | |
| if (!url) url = window.location.href; | |
| name = name.replace(/[\[\]]/g, "\\$&"); | |
| var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), | |
| results = regex.exec(url); | |
| if (!results) return null; | |
| if (!results[2]) return ''; | |
| return decodeURIComponent(results[2].replace(/\+/g, " ")); | |
| } | |
| function resizeImage(image, viewport, fit, scale) { | |
| if (fit == 'width') { | |
| var image_ratio = image.width() / image.height(); | |
| image.width(viewport.width() * scale); | |
| image.height(viewport.width() / image_ratio * scale); | |
| } else if (fit == 'height') { | |
| var image_ratio = image.width() / image.height(); | |
| image.height(viewport.height() * scale); | |
| image.width(viewport.height() * image_ratio * scale); | |
| } | |
| } | |
| function centerImage(image, viewport) { | |
| var l = (viewport.width() - image.width()) / 2; | |
| var t = (viewport.height() - image.height()) / 2; | |
| image.offset({left: l, top: t}); | |
| } | |
| function getDefault(value, default_value) { | |
| if (value == '' || value == null) { | |
| return default_value; | |
| } else { | |
| return value; | |
| } | |
| } | |
| $( document ).ready( | |
| function() { | |
| var image_url = getParameterByName('image'); | |
| var fit = getParameterByName('fit'); | |
| var background = getParameterByName('background'); | |
| var scale = getParameterByName('scale'); | |
| fit = getDefault(fit, 'width'); | |
| scale = getDefault(scale, '1'); | |
| var viewport = $('#viewport'); | |
| var image = $('#image'); | |
| var help = $('#help'); | |
| if (background != '' && background != null) { | |
| viewport.css('background-color', background); | |
| } | |
| if (image_url != '' && image_url != null) { | |
| image.attr('src', image_url); | |
| image.on('load', function() { | |
| resizeImage($( this ), viewport, fit, scale); | |
| centerImage($( this ), viewport); | |
| }); | |
| } else { | |
| image.hide(); | |
| help.show(); | |
| } | |
| } | |
| ); | |
| </script> | |
| <body> | |
| <div id='viewport'> | |
| <img id='image' src='#' alt='Image not loaded!' /> | |
| <div id='help'> | |
| <p><b>ImageViewportResizer</b> tries to resize the images to fit viewport | |
| of the browser. Add GET parameters to display image resized to your | |
| preference.</p> | |
| <dl> | |
| <dt>image</dt> | |
| <dd>Image URL to display.</dd> | |
| <dt>fit</dt> | |
| <dd>Describe how to fit the image. Value: <code>width</code>, | |
| <code>height</code>. Defaults to <code>width</code>.</dd> | |
| <dt>scale</dt> | |
| <dd>Scaling augmentation of the image in addition to image resizing | |
| done by <code>fit</code> parameter. Defaults to <code>1</code>.</dd> | |
| <dt>background</dt> | |
| <dd>Color of the background (if the image doesn't cover the entire | |
| viewport. Defaults to <code>white</code>. It accepts HTML color codes and | |
| names. Note that you need to URL escape RGB codes like <code>#566D7E</code> as | |
| <code>%23566D7E</code>.</dd> | |
| </dl> | |
| <p><b>Examples:</b> | |
| <ul> | |
| <li><code><a href="?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg">?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg</a></code>: Example of a narrow portrait image fitted to viewport width (default).</li> | |
| <li><code><a href="?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height">?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height</a></code>: Example of a narrow portrait image fitted to viewport height.</li> | |
| <li><code><a href="?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height&scale=0.8">?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height&scale=0.80</a></code>: Example of a narrow portrait image fitted to viewport height and scaled down to 80%.</li> | |
| <li><code><a href="?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height&scale=0.8&background=%23566D7E">?image=http://121clicks.com/wp-content/uploads/2012/04/portrait_eyes_23.jpg&fit=height&scale=0.80&background=%23566D7E</a></code>: Example of a narrow portrait image fitted to viewport height and scaled down to 80% with background color.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment