15. February 2014
von Blackbam

When coding responsive Web-Designs we usually have images in the content and in various containers with varying dimensions. In these containers, images should never be bigger than the HTML-container itself. In order to solve this problem I have developed this little script which may be helpful for some of you visitors, too. It is just required to set a jQuery selector for the container itself (to get the maximum width) and one to select all the images affected.

function scale_content_images() {

    $('#my_container img').each(function() {

            var the_image = this;
            var maxAvailableWidth = $('#my_container').width()-20; // Max width for the image
            var ratio = 0;  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height
            var orig_width = parseInt($(this).attr("width")); // the intended width of the image
            var orig_height = parseInt($(this).attr("height")); // the intended height of the image

            // if intended width/height not available, get original image dimensions and set these
            if(isNaN(orig_width)||isNaN(orig_height)) {
                var image = new Image();
                image.src = $(the_image).attr("src");
                orig_width = image.naturalWidth;
                orig_height= image.naturalHeight;

            // Check if the current width is larger than the max
            if(orig_width>maxAvailableWidth) {
                ratio = maxAvailableWidth / width;   // get ratio for scaling image
                $(this).css("width", maxAvailableWidth); // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
                width = width * ratio;    // Reset width to match scaled image
            } else {

$(document).ready(function() {

$(document).resize(function() {


Dieser Eintrag wurde am 15. February 2014 um 4:04 in der Kategorie jQuery, Web Development veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.

Tags: ,

Warning: Use of undefined constant Ext_related_links - assumed 'Ext_related_links' (this will throw an Error in a future version of PHP) in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75

No comments yet

Kommentare abonnieren (RSS) or URL Trackback

Leave a comment:

Warning: include_once(/home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache-premium/pro/library/lazy-load.php): failed to open stream: No such file or directory in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 793 Warning: include_once(): Failed opening '/home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache-premium/pro/library/lazy-load.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 793 Fatal error: Uncaught Error: Call to a member function lazy_load() on null in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php:796 Stack trace: #0 [internal function]: WpFastestCacheCreateCache->callback('...', 9) #1 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/functions.php(4552): ob_end_flush() #2 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/class-wp-hook.php(288): wp_ob_end_flush_all('') #3 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/class-wp-hook.php(312): WP_Hook->apply_filters('', Array) #4 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/plugin.php(478): WP_Hook->do_action(Array) #5 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/load.php(947): do_action('shutdown') #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 796