Technical Solution

How to set the image height displayed equal in all browsers

Nidhi.sen | | 1 min read

In this article, I am mentioning about how the height of an image can be changed depending on which browser is been used by the user. In one of our Drupal sites, the height of the images displayed in a gallery was shown different in different browsers. So we have set the height of the images displayed in the gallery by detecting the browser been used using the '$.browser' property in jQuery.

The browser detection, using $.browser, for the most common browsers are described below:
Safari browser - $.browser.safari
Opera browser - $.browser.opera
Internet Explorer - $.browser.msie
Mozilla FIrefox - $.browser.mozilla
Chrome browser - $.browser.chrome

Now, how the image height is changed when the site is viewed in IE browser is explained below: 

if($.browser.msie) {
	var newheight = screen.availHeight * 0.60;
} else {
	var newheight = screen.availHeight * 0.61;
       }        
$(".portrait img").css("height",Math.ceil(newheight));

The above code describes that the image height is set as 60% height of the available screen height if viewed in IE browser. For the remaining browsers the height is set as 61% height of the available screen height.

 

 

Related Topics