CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 28th, 2003, 07:04 PM
LookitsPuck LookitsPuck is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Posts: 3 LookitsPuck User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Image resizing in a cell [CSS or HTML?]

I'm looking to do a site redesign. I'm a fan of being subtle, so I don't like to go overboard w/ graphics and the such. However, I have a pretty cool design idea that I'm throwing around [I still have a lot to do], and here is my current layout:

URL

My problem is this:
How do I have an image within a cell resize itself to fit inside the cell w/o having the cell resize to fit the image? For example, say if I have a 215x100 cell, and the image is 100x100, how would I get it so that it stretches to fit the cell? Also, at the same time, say if an image was 250x250, how would one go about having it so the image would resize to 215x100 [the size of the cell] instead of making the cell stretch? This is using tables, but I'd imagine this could be accomplished more smoothly w/ CSS. I was just wondering if it could be done w/ tables, if not how would I go about doing it in CSS?

Reply With Quote
  #2  
Old November 28th, 2003, 11:05 PM
kk5st's Avatar
kk5st kk5st is online now
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 4,541 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 1 h 11 m
Reputation Power: 597
If you are satisfied to compress and/or stretch the image, all that is needed is to use the width and height attributes for the img element. The same applies to using CSS. Just alter the syntax. The browser will distort it to fit.

(If you prefer that your image not be used for this demo, I will remove it.)

If you want the image to maintain its aspect ratio, you will need to size and crop in your favorite (Gnu) image manipulation program.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.

Reply With Quote
  #3  
Old November 29th, 2003, 04:57 PM
LookitsPuck LookitsPuck is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Posts: 3 LookitsPuck User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally posted by kk5st
[B]If you are satisfied to compress and/or stretch the image, all that is needed is to use the width and height attributes for the img element. The same applies to using CSS. Just alter the syntax. The browser will distort it to fit.


Say if I don't care if it stretches/compresses. I don't want to specify it to be 215 x 100, because on larger resolutions the images will remain small and not proportional to the rest of the page. Is there a way that I can have the images stretch to fit the size of the cell instead of making the cell too big?


Quote:
(If you prefer that your image not be used for this demo, I will remove it.)


It's cool.

Reply With Quote
  #4  
Old November 29th, 2003, 06:52 PM
asdruble asdruble is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Location: Sao Paulo - Brasil
Posts: 23 asdruble User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to asdruble
i understood now what u said, but i still do not understand why u have this problem with resolution...
what u can do is, instead of making the table width 70%, change it to a fixed value in pixels.
ahh, and another thing... plizzz... dont use frontpage... use dreamweaver! =)

Reply With Quote
  #5  
Old November 29th, 2003, 11:13 PM
kk5st's Avatar
kk5st kk5st is online now
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 4,541 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 1 h 11 m
Reputation Power: 597
OK. here's one more try

cheers,

gary

ps.
Quote:
and another thing... plizzz... dont use frontpage... use dreamweaver! =)
Actually, use Emacs, Vim, Cooledit, or another good quality text editor. No wysiwyg editor provides clean, standards compliant code.--gt

Last edited by kk5st : November 29th, 2003 at 11:21 PM.

Reply With Quote
  #6  
Old November 30th, 2003, 07:19 PM
LookitsPuck LookitsPuck is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Nov 2003
Posts: 3 LookitsPuck User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally posted by kk5st
OK. here's one more try

cheers,

gary

[quote]
ps. Actually, use Emacs, Vim, Cooledit, or another good quality text editor. No wysiwyg editor provides clean, standards compliant code.--gt


I used to just write the code in Notepad, I stopped doing it as making the overall layout via tables in a wysiwyg program cut down on redundant code writing. I might have to start doing it again though.

Last edited by LookitsPuck : November 30th, 2003 at 07:23 PM.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > Image resizing in a cell [CSS or HTML?]


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway