sizing image in css

W

Wombatwal

I am experimenting with placing images on a page using float and setting the
image size.
I am using an external style sheet. Below is my code in the external style
sheet, and below that is my code in the html page.
I have used different numbers for width and height plus px but the images
are huge, but the right ones, float to the left and right.
What am I doing wrong, I have scanned the internet with no help. As you can
see I am struggling with CSS.

external css sheet
#photo1 {width: 2; height: 2; float: left; }

#photo2 {width: 2; height: 2; float: right;}


html page
<body>
<div id="photo1"><img src="Twins.jpg"></div>

<div id="photo2"><img src="stuart2.jpg"></div>
 
E

Els

Wombatwal said:
I am experimenting with placing images on a page using float and setting the
image size.
I am using an external style sheet. Below is my code in the external style
sheet, and below that is my code in the html page.
I have used different numbers for width and height plus px but the images
are huge, but the right ones, float to the left and right.
What am I doing wrong, I have scanned the internet with no help. As you can
see I am struggling with CSS.

external css sheet
#photo1 {width: 2; height: 2; float: left; }
#photo2 {width: 2; height: 2; float: right;}
Click to expand...

2 what? hobnobs? ;-)

I'm just guessing these aren't really 2 pixel images, so I've invented
a width and height of 100px:

#photo1{width:100px;height:100px;float:left;}
#photo2{width:100px;height:100px;float:right;}
<div id="photo1"><img src="Twins.jpg"></div>

<div id="photo2"><img src="stuart2.jpg"></div>
Click to expand...

That gives the width and height to the divs, not the images.

<img id="photo1" src="Twins.jpg" alt="twins">
<img id="photo2" src="stuart2.jpg" alt="Stuart">

Also: you are saying the images are huge. Even after managing width
and height through CSS, this means the original size is downloaded to
the visitor's browser. Means the page will load slower than needed,
and also the image won't look very good. Resize the images to the size
you want in the page, and you're eliminating both problems.

HTH

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Dave Edmunds - I Knew The Bride (when She Used To Rock
And Roll)
 
J

Jonathan N. Little

Wombatwal said:
I am experimenting with placing images on a page using float and setting the
image size.
I am using an external style sheet. Below is my code in the external style
sheet, and below that is my code in the html page.
I have used different numbers for width and height plus px but the images
are huge, but the right ones, float to the left and right.
What am I doing wrong, I have scanned the internet with no help. As you can
see I am struggling with CSS.

external css sheet
#photo1 {width: 2; height: 2; float: left; }

#photo2 {width: 2; height: 2; float: right;}


html page
<body>
<div id="photo1"><img src="Twins.jpg"></div>

<div id="photo2"><img src="stuart2.jpg"></div>
Click to expand...


Errors:

#1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes
length values in CSS must have units { width: 2px; }. Exception is
line-height which can take a decimal value.

#2 Resizing images by constraining markup and not resampling is a very
bad idea. The algorithm used by browsers is crude compared to that of
image editing software and shows quite "clearly" in the results! Also
when your reduce an image digitally unlike the old days in the dark room
the image tends to loose detail and requires tweaking with smoothing and
sharpen filters, (which your browser does not do). Lastly, as digital
images increase in dimensions their associated file sizes increases not
linearly but geometrically. So that 5-6 mega-pixel
fresh-from-the-digital-camera monster will top out about 2-3 MB!
constraining with markup to 400 pixels *will not* reduce what has to be
downloaded from the server! If you resample to 400 pixels then not only
will you get a better looking results but the download will only be
about 30KB!


Recommendation: Always resample and optimize images to the exact size
required when using in a webpage. If you need thumbnails create a second
set of images resample to the thumbnail dimensions. Do not use the
full size images constrained with markup.
 
J

Jonathan N. Little

Errors:

#1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes
Click to expand...

<snip my lengthy dissertation>

Wow I am just too slow in typing, Els beat me to the punch, or maybe I
don't need to include the complete theory of computing in my posts!
 
E

Els

Jonathan said:
Wow I am just too slow in typing, Els beat me to the punch, or maybe I
don't need to include the complete theory of computing in my posts!
Click to expand...

<g>
I do type fast, but I'm also just too lazy to write very long stories
in usenet posts ;-)
 
J

Jonathan N. Little

Chaddy2222 said:
A dam fine song indeed.
Although, it's one of the only ACDC albums I don't have, (although I
got a copy of Jale Break a while ago).
Click to expand...

Naw, I was a Uriah Heep fan, give me Salisbury or Easy Livin'
 
E

Els

Chaddy2222 said:
A dam fine song indeed.
Although, it's one of the only ACDC albums I don't have, (although I
got a copy of Jale Break a while ago).
Click to expand...

I don't have anything else by them really, just that one song :)
 
R

richard

Wombatwal said:
I am experimenting with placing images on a page using float and setting
the image size.
I am using an external style sheet. Below is my code in the external style
sheet, and below that is my code in the html page.
I have used different numbers for width and height plus px but the images
are huge, but the right ones, float to the left and right.
What am I doing wrong, I have scanned the internet with no help. As you
can see I am struggling with CSS.

external css sheet
#photo1 {width: 2; height: 2; float: left; }

#photo2 {width: 2; height: 2; float: right;}
Click to expand...

Width and height must be defined with something such as px (pixels); inches,
millimeters and so on.
You show floating left and right. Which do you want? It is not both.
Then declare the float property only on the first item. All others follow
the pattern until the next break .
If you had more photos, each subsequent photo would float along the same
order beside the last one.
Or you could just continue using "left" with each. Until you need to drop a
line, in which case you would use float:clear.
Plenty of websites that illustrate this.
Search for "CSS Float attributes".
Also, spaces are not needed after the :.

Division size for images should be sized according to the image size.
If you need to, resize the image with an editor.
You might want to try using PNG, instead of JPG, as PNG has a much smaller
footprint.

www.1-small-world.com/index2.html

Just so you can get a better idea of what to expect. Just foolin around with
it for now.
 
J

Jonathan N. Little

richard said:
"Wombatwal" <[email protected]> wrote in message
Click to expand...
You show floating left and right. Which do you want? It is not both.
Click to expand...

That is not true, he has float left to on and right to the other. Who
knows maybe he want text to run down the middle...
Then declare the float property only on the first item. All others
follow the pattern until the next break .
If you had more photos, each subsequent photo would float along the same
order beside the last one.
Or you could just continue using "left" with each. Until you need to
drop a line, in which case you would use float:clear.
Click to expand...

Agreed, if OP desires to just stack images as the browser width allows,
then float only one direction and they will 2, 3, 4 ... across as room
allows
Plenty of websites that illustrate this.
Search for "CSS Float attributes".
Also, spaces are not needed after the :.

Division size for images should be sized according to the image size.
If you need to, resize the image with an editor.
You might want to try using PNG, instead of JPG, as PNG has a much
smaller footprint.
Click to expand...

I disagree with that though, it depends on the image and the
application. Photographic type images where lossy compression is not as
noticeable JPG beats out the PNG almost every time. Paletted images
flatter graphic images such as logo's GIF and PNG shine. PNG's advantage
over GIF is that is can handle >256 colors and have alpha
transparencies. But in my experience with restricted palettes 8, 16, 32
colors for logos with simple transparency is required the GIF is smaller
than the PNG even when optimized.

www.1-small-world.com/index2.html
Click to expand...

Not sure it relates to the OP and be of much help.
 
B

Beauregard T. Shagnasty

richard said:
www.1-small-world.com/index2.html

Just so you can get a better idea of what to expect. Just foolin
around with it for now.
Click to expand...

Not a prime example of 'what to expect' ...

<http://jigsaw.w3.org/css-validator/...&uri=http://www.1-small-world.com/index2.html>

New documents should be HTML 4.01 Strict.
Uses unnecessary tables for layout, circa 1995.
Points (pt) are for printing; use percentages instead.
Always assign a fall-back font family, e.g.: sans-serif;
No body background color assigned.
Etc.
 
D

dorayme

"Alan J. Flavell said:
This is a fine recommendation in many caaes, indeed; but there
are exceptions. If you want to size images to match your text, then
you can use CSS to size them in em units. See discussion at
http://ppewww.ph.gla.ac.uk/~flavell/www/img-em-size.html

hth
Click to expand...

Yes, may I add a thought: In general, deterioration in quality is
far more noticeable in scaling up than down. It is true of even
good image editors for reasons that are not hard to understand.
And it would likely be even more true of lower class image
editing functions in browsers. So, website makers that do want to
occasionally employ this em based dimensioning should consider
allowing the natural size to be a little bigger than what they
guess would be the ideal for the majority of users text size
settings. Yes, this will be at the cost of a little bandwidth.
But the gains for the very occasional use of this technique might
well be worth it.

I have considered it in situations where the banner heading that
is mainly a picture of styled text looks strangely small when the
browser text setting is upped and yet one does not want to make
it bigger because then it is too big for smaller settings...
 
W

Wombatwal

Beauregard T. Shagnasty said:
Not a prime example of 'what to expect' ...

<http://jigsaw.w3.org/css-validator/...&uri=http://www.1-small-world.com/index2.html>

New documents should be HTML 4.01 Strict.
Uses unnecessary tables for layout, circa 1995.
Points (pt) are for printing; use percentages instead.
Always assign a fall-back font family, e.g.: sans-serif;
No body background color assigned.
Etc.
Click to expand...

I am overwhelmed by the replies.
Thank you very much everybody for your input.
I know now what I have done wrong.
Thanks again.
Bruce
 
A

Alan J. Flavell

Yes, may I add a thought: In general, deterioration in quality is
far more noticeable in scaling up than down. It is true of even
good image editors for reasons that are not hard to understand.
And it would likely be even more true of lower class image
editing functions in browsers. So, website makers that do want to
occasionally employ this em based dimensioning should consider
allowing the natural size to be a little bigger than what they
guess would be the ideal for the majority of users text size
settings.
Click to expand...

Agreed. I had a dim recollection of trying to say something very
similar myself - maybe it was somewhere in a usenet posting - but it
seems it didn't actually get onto my web page yet. I'll add a comment
about it.

thanks
 
D

dorayme

"Alan J. Flavell said:
Agreed. I had a dim recollection of trying to say something very
similar myself - maybe it was somewhere in a usenet posting - but it
seems it didn't actually get onto my web page yet. I'll add a comment
about it.

thanks
Click to expand...


Obviously, there are alternative strategies for deciding on the
em size. I was looking at your figures and thinking "mmm, go down
an order of mag, halve ..." and so on, in other words trying to
formularise. Not saying you said to do this! I am sure you would
urge some trial and error. On this theme:

Everything depends. In a case where I wanted a particular
"text-heading" to go up and down but nevertheless be an image, I
made one that I judged to be about right for a case of tired/poor
eyesight (or plain wanting to sit right back from a screen)
without being too extreme. The reason for this criterion is that
any enlargement will be a deterioration, so obviously best to
make it as big as any somewhat natural extremity. That gets the
size at one end. If really extreme text enlargements are
attempted, it is not the end of the world, it becomes a bit less
crisp. (Bandwidth considerations played no part here, the image
was black on white and tiny over a range of possible sizes)

Now I had to decide the em size for the css. For this, I went
down to what I regarded as the most likely size of text. An
uncertain quest, true... but one can force oneself to decide by
imagining putting a weeks wages on it and losing if you are more
than 10% out after a thorough investigation by a top research
program into people's habits. You play around till the pic is the
size that you would have a text heading. Roughly. I did this by
actually having a real text heading, 180 or 200% above normal to
compare above the imaged text (deleted/commented out later). This
gets the proportion as well.

It then stays sharp for smaller (keener sighted) and bigger too
up to a reasonable limit.

Luckily, in the case of a text heading, there are some guidelines
that are at least intuitively understood. But other pics in other
situations might require different comparisons.

I wanted Dom Casual for a heading of one page of a story (small
amusement for children and playful adults). Here is the page
concerned:

http://tinyurl.com/kldmb
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Stuck with html and css 25
Help with Visual Lightbox: Scripts 2
Working on mobile css menu with plenty of frustration! 2
CSS Grid inside slider not working... 1
Positioning CSS components 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Trouble with css 4

Members online

No members online now.
Total: 45 (members: 2, guests: 43)
Robots: 438

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top