WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > How to control the height of an image

Reply
  Thread Tools Display Modes
Old 13th October 10, 01:48 AM   #1
jjamjatra
WLC Member
 
Join Date: Jan 2008
Posts: 13
Default How to control the height of an image

I'm displaying an image within a table cell on a web page. It looks OK on Firefox 3.6 and IE8 but with Chrome 6.0 and Safari 5.0 the image is stretched vertically. What is the best way to control the height

Here is the generated HTML from my ASP.NET page:
HTML Code:
<tr>													<td colspan="4" align="center">
<input type="image" name="imgBtnPicture" id="imgBtnPicture" class="PopBoxImageSmall" title="Click to magnify/shrink" 
src="/zipeee/upload/154375_1.jpg" border="0" 
onclick="PopEx(this, null, null, 0, 0, 50, 'PopBoxImageLarge'); return false;" language="javascript" 
style="width:100%;" 
/> 
</td>
</tr>
Here is part of the CSS:

#imgBtnPicture {width: 50%; height: 50%}
.PopBoxImageSmall
{
border: none 0px #ffffff;
cursor: url("images/magplus.cur"), pointer;
}
jjamjatra is offline   Reply With Quote
Old 13th October 10, 06:08 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: How to control the height of an image

How is it streched vertically? As in it's literally stretched, or it's just taller than desired?

Also, got a link?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 13th October 10, 03:16 PM   #3
jjamjatra
WLC Member
 
Join Date: Jan 2008
Posts: 13
Default Re: How to control the height of an image

Thanks for responding. The true image is sort of square
(1632 x 1224 pixels) and in IE8 and FF 3.6 it looks as if the width and height are about the same. In the other browsers the vertical height is literally stretched (about 3 inches more than it should be).

I can't provide a link because my dev server is behind a firewall etc. I rightmouse on the elongated picture and try to save image as a .jpg on a public server for you to see yet the process of doing that seems to get rid of the distortion.

Shouldn't #imgBtnPicture {width: 50%; height: 50%} constrain the height for all browsers?
jjamjatra is offline   Reply With Quote
Old 13th October 10, 04:48 PM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: How to control the height of an image

Yes that should work. Make sure you don't have any zoom going in the errorous browsers.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 13th October 10, 05:16 PM   #5
jjamjatra
WLC Member
 
Join Date: Jan 2008
Posts: 13
Default Re: How to control the height of an image

Unfortunately, expressing height as a percentage does not work to constrain it in Safari and Chrome. I've made a quick attempt at a fix by:

removing width:50%
changing height:50% to height:370px

This works in all browsers I've tested but I guess all I'm really trying to do is to make it roughly "square". Width seems to be constrained by other elements. I just want a CSS way to say "make height the same as width" but this hardcoding of 370px seems to work adequately at the screen resolutions I've been testing with. It would be better to make this less rigid and more flexible in that regard.

p.s. I appreciate and like your statement of faith.
jjamjatra is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:49 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.