I have created a set of functions to calculate the aspect ratio of an image, set a height/width on document.ready
and on window.resize
resize the image. Now, I have got these functions working, however I feel like they could be more efficient/clean. So far I have to use cases. First, an image gallery I have setup and now, Iframes.
The below scriptfile includes the issue above, and some functionality for mobile, and an overlay.
Note: all these functions work (I do have an error imageResize('.com-background > img', ratio1);
ratio1 is not defined
within the window.resize
function.
scriptfile.js
function mobile() {
var ua = navigator.userAgent; var event = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
jQuery('.mobile-contain > a').bind(event, function() {
jQuery('#menu-main').slideToggle(500);
});
};
function overlay() {
jQuery('.com-block').mouseenter(function() {
jQuery(this).find('.com-title').css('display', 'none');
jQuery(this).find('.com-desc').css('display', 'table-cell');
});
jQuery('.com-block').mouseleave(function() {
jQuery(this).find('.com-title').css('display', 'table-cell');
jQuery(this).find('.com-desc').css('display', 'none');
});
}
function imageCalc(selector) {
var obj=$(selector);
var $imgWidth = obj.width();
var $imgHeight = obj.height();
var $imgAspectRatio = $imgHeight / $imgWidth;
// $(selector).css('margin-left', function( calcMargin ) { return parseInt($('.main-content').css('padding')) * -1 + "px"; }); fix for ie
obj.css('margin-left', '-10px' );
return $imgAspectRatio;
}
function setImageDims(selector, content_area, $imgAspectRatio) {
var container = $(content_area);
$(selector).css('height', function() { return $imgAspectRatio * container.width(); });
$(selector).css('width', function() { return container.width() + 20; });
}
function imageResize(selector, $imgAspectRatio) {
$(selector).css('width', function() { return $("body").width() });
$(selector).css('height', function() { return $imgAspectRatio * $(selector).width(); });
}
function cycleImages(){
var $active = $('.com-background .active');
var $next = ($active.next('img').length > 0) ? $active.next('img') : $('.com-background > img:first');
$next.css('z-index',2);
if ($('.com-background > img').length > 1) {
$active.fadeOut(1500,function(){
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
};
}
function setContainHeight() {
var biggestHeight = "0";
$(".com-background *").each(function(){
if ($(this).height() > biggestHeight ) {
biggestHeight = $(this).height();
}
});
$(".com-background").height(biggestHeight);
}
function setImgMaxHeight() {
var smallestHeight = "0";
$(".com-background *").each(function(){
if ($(this).height() > smallestHeight ) {
smallestHeight = $(this).height();
}
});
// Set the container height
$(".com-background img").css('max-height', smallestHeight);
}
$( document ).ready(function() {
$('.com-wrap').hide();
ratio1 = imageCalc('.com-background > img');
setImageDims('.com-background > img', '#main-content', ratio1);
ratio2 = imageCalc('.blog-entry-content iframe');
setImageDims('.blog-entry-content iframe', '#content', ratio2);
// imageCalc('.com-background > img');
// setImageDims('.com-background > img', '#main-content');
// imageCalc('.blog-entry-content iframe');
// setImageDims('.blog-entry-content iframe');
setImgMaxHeight();
});
$(window).bind("load", function() {
setContainHeight();
$('.com-more a').click(function(){
$('.com-wrap').toggle();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
setInterval(function(){cycleImages()}, 7000);
mobile();
overlay();
});
$(window).resize(function() {
setContainHeight();
if ($("body").width() < 980 ) {
imageResize('.com-background > img', ratio1);
// var ratio1 = imageCalc('.com-background > img');
// setImageDims('.com-background > img', '#main-content', ratio1);
} else {
setImageDims('.com-background > img', '#main-content');
}
if ($("body").width() < 770 ) {
jQuery('.menu-main-container').css('display', 'none');
}
if ($("body").width() > 770 ) {
jQuery('.menu-main-container').css('display', 'block');
}
}).resize();
I have also created a rudimentary fiddle to illustrate the imageCalc()
, setImageDims()
, and imageResize()
functionality here.
width:100%; height: auto
or similar; no JS required at all. Meanwhile the jsfiddle just seems stretch and squash the image; I don't see it doing anything related to the aspect ratio. So it's all a little confusing. \$\endgroup\$height: auto
+width: 100%
is the parent elements margin. I need the image to span the entire div, ignoring margin/padding. \$\endgroup\$