Blackbams Blog
development – digital arts – internet
Knowledge is free. No one may take possession of it.
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 {
$(this).css("width",orig_width);
$(this).css("height",orig_height);
}
});
}
$(document).ready(function() {
scale_content_images();
});
$(document).resize(function() {
scale_content_images();
});
Warning: Undefined variable $time_since in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 42 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: javascript, jQuery
Fatal error: Uncaught Error: Undefined constant "Ext_related_links" in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php:75 Stack trace: #0 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/template-loader.php(106): include() #1 /home/.sites/609/site1266/web/blackbams-blog/wp-blog-header.php(19): require_once('/home/.sites/60...') #2 /home/.sites/609/site1266/web/blackbams-blog/index.php(17): require('/home/.sites/60...') #3 {main} thrown in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75