/    Sign up×
Community /Pin to ProfileBookmark

making boxes fit the images in them

Copy linkTweet thisAlerts:
Mar 15.2007

i’m making a gallery page with thumbnails in one box and the full size image in another, the fullsize image is dynamically loaded through a url passed php variable. the full size image can vary in size, and i need the box it is in to chage to fit it so that it won’t overflow the box. how can i make the box scale to fit the image in it? as of now it changes size when the window is scaled wich i don’t want to happen either.

here is the site.
[URL=”http://cidic.info/test/gallery1.php”]http://cidic.info/test/gallery1.php[/URL]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@HemmerMar 16.2007 — Just dont specify a width for the div which your image is in - it should just fit to it automatically.
Copy linkTweet thisAlerts:
@cidicauthorMar 16.2007 — that works to a degree, and if you resize the window the box scales with it and the whole layout falls apart. thats what the site does now, what can i do ?
Copy linkTweet thisAlerts:
@CentauriMar 16.2007 — If both #left and #content are floated left (instead of position:absolute), and the margins (except for a top margin of 5px) and top:150px are removed from #content, the width will shrinkwrap. Unfortunately, if the total width of the pic and thumbnails is greater than the page, the #content div will wrap below the thumbnails before a horizontal scrollbar will come up. You could use display:table-cell, but IE doesn't understand that one.

Personally, I would set a width for #content and resize the pics to suit thew width via php functions.

Cheers

Graeme
Copy linkTweet thisAlerts:
@cidicauthorMar 16.2007 — well with those changes it works exactally the way i want except for the wraping, is there any way to prevent the wrap aside from tables?

thanks for the help, any idea why my zero margins aren't zero?
Copy linkTweet thisAlerts:
@CentauriMar 16.2007 — Had another look at it, and although I don't like absolute positioning with respect to the page, in this case it does solve the problem with the #content div. [CODE]#content {
[COLOR="Red"]position:absolute[/COLOR];
padding: 0 10px;
margin: 5px 0 0 [COLOR="Red"]160px[/COLOR];
border-left: 1px solid #646464;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #333333;
}[/CODE]

What margins are you concerned with ?

Cheers

Graeme
Copy linkTweet thisAlerts:
@cidicauthorMar 17.2007 — I'm not really concerned I just want everything to look nice, and be consistent. and autosize to the picture without wraping and ending up under the thumbnail box. and the above suggestions work in firefox but definately not in IE 6 ?
×

Success!

Help @cidic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...