WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > image height

Reply
  Thread Tools Display Modes
Old 14th December 10, 01:41 AM   #1
lauras2009
WLC Lover
 
Join Date: Jul 2009
Posts: 59
Default image height

I'm trying to display a set of randomly-generated images (different image each time you reload the page). All of the images in the set are the same width, but they vary in height. I don't know how to display these properly with CSS.

I've tried to set the height of the image(s) to auto but that doesn't work (nothing gets displayed); setting width and height to 100% doesn't work either (same). The only thing that works is using absolute values (width: 188px; height: 220px but the height is different for all the different images so that won't work either. The smaller images are repeating on the y axis. I've tried doing background-repeat: no repeat and declaring the height for the tallest image, but it's getting over-written somehow by "element: style" which is giving it attributes I haven't set (e.g., "repeat scroll 0 0 transparent"), and I don't know where that's coming from (I can see it in Firebug though).

Is there any way around this, or is there something simple I don't know about?

Thanks for any help,
Laura S.
lauras2009 is offline   Reply With Quote
Old 14th December 10, 09:01 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: image height

Set them a background to a fixed height and width container and set background-repeat:no-repeat;
chrishirst is offline   Reply With Quote
Old 15th December 10, 01:22 PM   #3
lauras2009
WLC Lover
 
Join Date: Jul 2009
Posts: 59
Default Re: image height

I think I've done that:

CSS:
Code:
#photoContainer {
	width: 188px;
	height: 400px;
	background-repeat: no-repeat;
}
	
#rndPhotoImg {
	width: 188px;
	height: 280px;
	margin-top: 77px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	}
	
#rndPhotoImg.noRepeat {
	background-repeat: no-repeat;
}
HTML:
Code:
<div id="photoContainer"><div id="rndPhotoImg" class="noRepeat"></div></div>
As you can see, I'm trying everything I know in order to get the background to not-repeat ... but it's not working ...
lauras2009 is offline   Reply With Quote
Old 15th December 10, 01:38 PM   #4
lauras2009
WLC Lover
 
Join Date: Jul 2009
Posts: 59
Default Re: image height

Ok, I figured it out. It had something to do with the javascript that was calling the images -- I had to specify no-repeat in the javascript explicitly, like this:

Code:
thePicture2.style.background="url("+picPath2+") no-repeat";
Thanks,
Laura
lauras2009 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 08:36 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.