Re: [WSG] To stretch an image within a div ??
Sorry have to jump on that one, Rick. No application can create extra pixels where only one existed. At best, they can interpolate what a pixel _might need to be_ by being very clever about the pixels surroundings and using sophisticated filters and techniques, but it is an educated guess at best. There is no such thing as enlarging in Photoshop or any other digital, pixel- based application. Only on CSI can you zoom into a 1MB image taken from 100 miles away and read the fingerprint on an suspect's wineglass, I'm afraid. In the non-fiction world, a pixel is the atomic unit. Joe On Jul 08, 2008, at 10:04, Rick Lecoat wrote: because, unlike the process of enlarging an image in, say, Photoshop, no extra pixels are created -- so the resolution change tends to be gruesome == Joe Ortenzi [EMAIL PROTECTED] http://www.typingthevoid.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] To stretch an image within a div ??
On 8 Jul 2008, at 10:24, Joseph Ortenzi wrote: No application can create extra pixels where only one existed. At best, they can interpolate what a pixel _might need to be_ by being very clever about the pixels surroundings and using sophisticated filters and techniques, but it is an educated guess at best. There is no such thing as enlarging in Photoshop or any other digital, pixel-based application. I think we're actually saying the same thing in different ways Joe. Probably I didn't explain myself very well. And I certainly wasn't trying to imply that Photoshop can give you perfect enlargements, but I think we're splitting hairs over the meaning of 'enlargement'. And now it's my turn to take minor issue: if you enlarge an image in Photoshop (eg. Image Image Size) then in fact Photoshop *does* create new pixels. There's no way around it; if you go from 10 x 10 pixels to 20 x 20 then Photoshop has created 300 new pixels. And the image *is* larger in terms of pixel dimensions. However, what you say is true: the *contents* of those newly created pixels is entirely guesswork on the part of the software, extrapolated from the original data. So the image is degraded. My point however, was that the less-than-perfect enlargement that you get from Photoshop's interpolation algorithms is still way better than the process of stretching an image in the browser with no interpolation at all. Sorry, this is drifting OT, so I'll shut up. -- Rick Lecoat www.sharkattack.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] To stretch an image within a div ??
I completely understand everyone's comments on image enlargement using professional graphic applications vs. browsers using their cheesy routines. What I didn't know was if I had missed any use of proper techniques within CSS to achieve what I needed. My first post exposes the approaches I am familiar with, but with ample hesitations. I did consider slicing a section of the image in say, Photoshop, and using it to repeat the background within a different element. I felt then, it was an unclean approach, at least with the way I presented it. If so, I would still like your (or anyone's) opinion on the right way to do it. If you don't mind, please peek at my initial post while offering your valuable opinions. Regarding the use of CSS 3: So, if the image is smaller in width (like in my case), should I guess there's no way to stretch it without CSS 3 support ? Nope, not that I know of -- at least not as a background image. You can clip them, you can repeat them, you can offset them... but you can't stretch them. From what I've read so far, I believe you can. Please refer to the following link: http://webdesign.about.com/od/examples/l/blbgsizeexample.htm Regards, Mathew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] To stretch an image within a div ??
Unfortunately, the link is intranet. I could perhaps attempt to post the
skeletal code of the test version, if it's really required.
From your earlier email I'm starting to gather that if an image is wider
than the width of the div (or even browser window), auto-fitting isn't going
to be a problem. So, if the image is smaller in width (like in my case),
should I guess there's no way to stretch it without CSS 3 support ?
Thanks,
Mathew
On 7/6/08, Kepler Gelotte [EMAIL PROTECTED] wrote:
I can't help you without a link. Please reply to the list and not this
email.
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
--
*From:* Matt [mailto:[EMAIL PROTECTED]
*Sent:* Sunday, July 06, 2008 12:37 AM
*To:* Kepler Gelotte
*Cc:* wsg@webstandardsgroup.org
*Subject:* Re: [WSG] To stretch an image within a div ??
Kepler,
Thanks for the quick reply.
I'm using a 3 column elastic design with a min-width of 54 em. The
content div stretches like a hybrid does, but the left and right sidebars
don't. The header and footer will stretch without a problem as well. The
content is embedded between the sidebars and the header doesn't quite reach
the window edges because of a dliberate 10px margin. Adding the CSS for
clarity:
div.leftSidebar {
width: 10em;
float: left;
}
div.rightSidebar {
width: 10em;
float: right;
}
div.content {
min-width: 30em;
margin-left: 10em;
margin-right: 10em;
}
div.footer {
clear: both;
}
I had tried chaning the width and overflow. No visible effects were
observed.
Have I logically omitted or overlooked something here ?
Thanks again,
Mathew
On 7/5/08, *Kepler Gelotte* [EMAIL PROTECTED] wrote:
Hi Matt,
If you stretch the img (you can't stretch a background-image as far as I
know), you will definitely not be happy with the results.
I am assuming you have a flexible design where the content expands to fit
the width of the browser's window? If that is the case, create a very wide
image and then use:
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat;
height: 200px;
width: 100%;
overflow: hidden;
}
You can see an example of this technique I used on a web site I created a
while back: http://www.freightturntables.com
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] To stretch an image within a div ??
My web page is divided into 5 parts: Header, Left Sidebar, Content, Right
Sidebar Footer. Within the header, I wish to place a large logo, a mini
logo and a site name or company name in large text. Currently, the CSS I'm
using for the header is:
:
:
div {
margin: 0;
padding: 0;
border: 1px dashed #00; //This is for visual testing purposes only
}
div.page {
min-width: 54em;
padding: 10px;
}
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat; // This image is not repeat worthy !
height:200px;
}
:
:
And the HTML is:
:
:
div class=page
div class=header
h1Title/h1
/div
:
:
/div
However the image does not stretch to fill the right portion of the 'header'
div. Tiling this image spoils things. I've thought about slicing the
rightmost portion of the large_logo. I could then, perhaps, introduce a
parent div to 'header', say 'headerBackground' with the following CSS:
div.headerBackground {
background-image: url(images/large_logo_filler.gif);
background-repeat: repeat-x;
height:200px;
}
This sounds like a nasty way to solve this, with minimal guarantee of making
the repeated slice look good. I'm not familiar with the technique used to
stretch an image within a DIV, and am not confident that it won't visually
skew the logo. A very simple table based technique seems to *visually*
solve this problem quite well without having to fool around with the logo.
But I wouldn't be here asking for help if I was in favor of tables.
What is the standards compliant way to handle this ?
Thanks,
Matt
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] To stretch an image within a div ??
Hi Matt,
If you stretch the img (you can't stretch a background-image as far as I
know), you will definitely not be happy with the results.
I am assuming you have a flexible design where the content expands to fit
the width of the browser's window? If that is the case, create a very wide
image and then use:
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat;
height: 200px;
width: 100%;
overflow: hidden;
}
You can see an example of this technique I used on a web site I created a
while back: http://www.freightturntables.com
http://www.freightturntables.com/
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
http://www.neighborwebmaster.com www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***BEGIN:VCARD
VERSION:2.1
N:Gelotte;Kepler;;Mr.
FN:Kepler Gelotte ([EMAIL PROTECTED])
ORG:Neighbor Webmaster
TITLE:Web Designer
TEL;WORK;VOICE:(732) 302-0904
TEL;WORK;FAX:(732) 302-0904
ADR;WORK:;;156 Normandy Dr;Piscataway;NJ;08854;United States of America
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:156 Normandy Dr=0D=0APiscataway, NJ 08854=0D=0AUnited States of America
URL;WORK:http://www.neighborwebmaster.com
EMAIL;PREF;INTERNET:[EMAIL PROTECTED]
REV:20070415T052107Z
END:VCARD
Re: [WSG] To stretch an image within a div ??
Kepler,
Thanks for the quick reply.
I'm using a 3 column elastic design with a min-width of 54 em. The
content div stretches like a hybrid does, but the left and right sidebars
don't. The header and footer will stretch without a problem as well. The
content is embedded between the sidebars and the header doesn't quite reach
the window edges because of a dliberate 10px margin. Adding the CSS for
clarity:
div.leftSidebar {
width: 10em;
float: left;
}
div.rightSidebar {
width: 10em;
float: right;
}
div.content {
min-width: 30em;
margin-left: 10em;
margin-right: 10em;
}
div.footer {
clear: both;
}
I had tried chaning the width and overflow. No visible effects were
observed.
Have I logically omitted or overlooked something here ?
Thanks again,
Mathew
On 7/5/08, Kepler Gelotte [EMAIL PROTECTED] wrote:
Hi Matt,
If you stretch the img (you can't stretch a background-image as far as I
know), you will definitely not be happy with the results.
I am assuming you have a flexible design where the content expands to fit
the width of the browser's window? If that is the case, create a very wide
image and then use:
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat;
height: 200px;
width: 100%;
overflow: hidden;
}
You can see an example of this technique I used on a web site I created a
while back: http://www.freightturntables.com
Best regards,
*Kepler Gelotte*
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
