Image not resized to browser window

D

Don

How do I make a large image be resized so it all fits in the browser
window? I've found I.E.'s "Enable Automatic Image Resizing" setting
works if the image is opened via a link directly to the picture. Or, if
the image is opened in the browser with "File, Open".

However, if the image is CONTAINED WITHIN its own HTML page, with "<img
src" tag, it does not work!! Is this just me? Very simply, if I have a
page:

<html>
<head>
<title>IMG_1981</title>
</head>
<body>
<img src="IMG_1981.jpg">
</body>
</html>

then image resizing does NOT work! How can I get resizing to work in
this page? I do NOT want to specify any particular size, rather I want
the image to be resized to be fully contained in the browser window,
however big the window is.

Many thanks in advance!
 
M

mbstevens

Don said:
How do I make a large image be resized so it all fits in the browser
window? I've found I.E.'s "Enable Automatic Image Resizing" setting
works if the image is opened via a link directly to the picture. Or, if
the image is opened in the browser with "File, Open".

However, if the image is CONTAINED WITHIN its own HTML page, with "<img
src" tag, it does not work!! Is this just me? Very simply, if I have a
page:

<html>
<head>
<title>IMG_1981</title>
</head>
<body>
<img src="IMG_1981.jpg">
</body>
</html>

then image resizing does NOT work! How can I get resizing to work in
this page? I do NOT want to specify any particular size,
Click to expand...

....bad idea...
rather I want
the image to be resized to be fully contained in the browser window,
however big the window is.

Many thanks in advance!
Click to expand...

You make the image the size it should be in
your imaging software (Gimp, Photoshop,
etc.). There are drawbacks to allowing
browsers to resize images.
 
D

dorayme

Don said:
How do I make a large image be resized so it all fits in the browser
window? I've found I.E.'s "Enable Automatic Image Resizing" setting
works if the image is opened via a link directly to the picture. Or, if
the image is opened in the browser with "File, Open".

However, if the image is CONTAINED WITHIN its own HTML page, with "<img
src" tag, it does not work!! Is this just me? Very simply, if I have a
page:

<html>
<head>
<title>IMG_1981</title>
</head>
<body>
<img src="IMG_1981.jpg">
</body>
</html>

then image resizing does NOT work! How can I get resizing to work in
this page? I do NOT want to specify any particular size, rather I want
the image to be resized to be fully contained in the browser window,
however big the window is.

Many thanks in advance!
Click to expand...

Try this and tell me if it works:

<html>
<head>
<title>IMG_1981</title>
</head>
<body>
<img style="width:100%;" src="IMG_1981.jpg">
</body>
</html>

(I assume landscape and width is most important dim)
 
D

Don

dorayme said:
Try this and tell me if it works:

<html>
<head>
<title>IMG_1981</title>
</head>
<body>
<img style="width:100%;" src="IMG_1981.jpg">
</body>
</html>

(I assume landscape and width is most important dim)
Click to expand...


It works! You are golden, many thanks!!
 
D

Don

mbstevens said:
...bad idea...


You make the image the size it should be in
your imaging software (Gimp, Photoshop,
etc.). There are drawbacks to allowing
browsers to resize images.
Click to expand...

And the drawbacks are...? Why do you say this? Here's my motivation:
I made a 'home' page with links to pages containing the images. Each of
the image pages contain 'next', 'previous' buttons so it can function as
a slide show, which is why I can't make the home page link directly to
the pictures. I want to put all this on a CD to give to friends, but I
want to include the FULL resolution images in case they want to make
large prints, which is why I don't want to set any particular image
size. ALSO, the images will appear full-screen (IE maximized) for
whatever display resolution they have.
 
D

dorayme

You make the image the size it should be in
your imaging software (Gimp, Photoshop,
etc.). There are drawbacks to allowing
browsers to resize images.
Click to expand...

And the drawbacks are...? [/QUOTE]

One of them is that the resizing algorithms of browsers (which
have to work quickly) have not generally been as good as those in
good image manipulation programs (like Photoshop).

Another is that pics generally look shithouse when upped up from
their natural size (the size they are saved in) and you can't
know how big someone's screen might be.

But if you know these limitations and you judge there are overall
benefits, I can't condemn you. And that is what is most
important. What I think.

(All of today I have been either suffering or enjoying
particularly strong illusions of grandeur)
 
M

mbstevens

Don said:
And the drawbacks are...? Why do you say this? Here's my motivation:
I made a 'home' page with links to pages containing the images. Each of
the image pages contain 'next', 'previous' buttons so it can function as
a slide show, which is why I can't make the home page link directly to
the pictures. I want to put all this on a CD to give to friends,
Click to expand...

If it will never appear on the net, letting
the browser resize is not quite so bad, but I
still would not do it unless you are also
sure that everyone you distribute the CDs to
also have a browser that resizes images in a
way that looks good and that maintains the
aspect ratio.
but I
want to include the FULL resolution images in case they want to make
large prints, which is why I don't want to set any particular image
size.
Click to expand...

I would make a set of images reduced to the
same width and have a printing link to the
full sized image. Your pages will fail
validation without a width and height set.
ALSO, the images will appear full-screen (IE maximized) for
whatever display resolution they have.
Click to expand...

Not unless they allow their browser windows
to be maximized. Are you playing around with
jscript to maximize their windows without
their permission? That would be a bad idea.
They might have different ideas about how
large their browser windows should be.
Better to make reduced images that are small
enough to display in even a reasonably small
browser window.
 
D

dorayme

Don said:
And the drawbacks are...?
Click to expand...

Another drawback, if you put up big photos then you disadvantage
people who either have very small screens, low bandwidth or who
are happy to see them a reasonable small size. It works like
this: you can put up a massive pic and it will resize by the
browser either with the style I gave you or in other ways (there
are situations when you can base the width and height on ems
according to the px proportions of the native size) not to badly
if it is viewed with less pixels than native. But the big file
still has to be downloaded to the punters machine, the poor
fellow on dialup or small screen is getting more than he wants
for hs purpose.

You can easily solve the problem of giving everyone what they
want by ensuring you offer different sizes and making this plain.
For big files, best to make it clear they can download it for
printing (don't lay it into the page, except for a link to it).
Thumbnails and moderate sizes for enlargements for the average
we\bsite, say 100px square and 500px square as a rough guide.
Anything much bigger, I would take heed of what mb says.
 
M

mbstevens

dorayme said:
You can easily solve the problem of giving everyone what they
want by ensuring you offer different sizes and making this plain.
For big files, best to make it clear they can download it for
printing (don't lay it into the page, except for a link to it).
Thumbnails and moderate sizes for enlargements for the average
we\bsite, say 100px square and 500px square as a rough guide.
Anything much bigger, I would take heed of what mb says.
Click to expand...

Also, 'previous' - 'next' links are often
useful for truly serial things like stories
and articles. But if you do not really need
to control the visitor's experience, it would
be better to present thumbnails on a single
page and let the visitor choose which
enlargements s/he wants to see in the order
they want to see them.

For example, there must be thousands of
photographer sites on the net that would be
better off without 'previous' - 'next' links.
It is really irritating to have the
photographer's sequencing forced onto you.
Other kinds of art sites also often try to
herd the visitor. I often give up on even
fine work because I get tired of being forced
into a sequence.
 
D

dorayme

mbstevens said:
Also, 'previous' - 'next' links are often
useful for truly serial things like stories
and articles. But if you do not really need
to control the visitor's experience, it would
be better to present thumbnails on a single
page and let the visitor choose which
enlargements s/he wants to see in the order
they want to see them.

For example, there must be thousands of
photographer sites on the net that would be
better off without 'previous' - 'next' links.
It is really irritating to have the
photographer's sequencing forced onto you.
Other kinds of art sites also often try to
herd the visitor. I often give up on even
fine work because I get tired of being forced
into a sequence.
Click to expand...

Good point. Photoshop back in version 6 was aware of it and in
their (tables based) photo gallery auto feature generated
thumbnails for the index pages and on each page of the
enlargement was a forward and back button, and an "up" arrow
button to go back to the index pages.
 
C

Chris F.A. Johnson

Also, 'previous' - 'next' links are often
useful for truly serial things like stories
and articles. But if you do not really need
to control the visitor's experience, it would
be better to present thumbnails on a single
page and let the visitor choose which
enlargements s/he wants to see in the order
they want to see them.

For example, there must be thousands of
photographer sites on the net that would be
better off without 'previous' - 'next' links.
It is really irritating to have the
photographer's sequencing forced onto you.
Other kinds of art sites also often try to
herd the visitor. I often give up on even
fine work because I get tired of being forced
into a sequence.
Click to expand...

The existence of a sequence does not force you into it unless you
choose to use it.
 
D

dorayme

"Chris F.A. Johnson said:
The existence of a sequence does not force you into it unless you
choose to use it.
Click to expand...

I think that mb (no, I am sorry, I can't let him speak for
himself, he might not get his thoughts about it quite right and
that is why I am here on earth) means it is an irritation to go
to a pic, like it, go to a few more, start to be a bit
uncomfortable that it would be nice to have some choice to skip
some of these things... in other words one can get sucked in.
This choice argument is used a lot by (very) free marketeers...

:)
 
S

Spartanicus

[big snip]

Please snip quotes down to a minimum.
And the drawbacks are...?
Click to expand...

Browsers typically do a poor job at resizing, your images are likely to
look poor when you code so that they do that.
Why do you say this? Here's my motivation:
I made a 'home' page with links to pages containing the images. Each of
the image pages contain 'next', 'previous' buttons so it can function as
a slide show, which is why I can't make the home page link directly to
the pictures.
Click to expand...

You can create both an index page with thumbnails and a Previous & Next
links beneath the target pages. If that sounds like a lot of work, there
are plenty of programs out there that can generate such automatically.
I want to put all this on a CD to give to friends, but I
want to include the FULL resolution images in case they want to make
large prints, which is why I don't want to set any particular image
size.
Click to expand...

Apart from the quality argument, full resolution images such as
typically made by a digital camera can use a very large amount of memory
and can be very slow to resize. It would be much better to resize them
to a reasonable size for your target audience, let's say for desktop
usage 800px wide, then use a print stylesheet to serve the full
resolution images. 800px wide images should suit most desktop viewports
fine, it will also look nice (I'd center the images). Users using a
viewport width smaller than 800px will get a scrollbar, this is not
great, but perfectly functional.

The only reasonable way to also cater for let's say small screen mobile
devices is to create another set of images aimed at that screen width.
Again this need not be a lot of work due to the available software.

You could then let people choose between the various sizes, or select a
version with Javascript based on their viewport width.
 
S

Spartanicus

mbstevens said:
I would make a set of images reduced to the
same width and have a printing link to the
full sized image. Your pages will fail
validation without a width and height set.
Click to expand...

The width and height attribute are optional.
 
M

mbstevens

Spartanicus said:
The width and height attribute are optional.
Click to expand...
That depends on the doc type. I wouldn't
use any doc type so old that it allows you to
leave them out, and I certainly wouldn't
write a page with no doc type.
 
M

mbstevens

dorayme said:
I think that mb (no, I am sorry, I can't let him speak for
himself, he might not get his thoughts about it quite right and
that is why I am here on earth)
Click to expand...

That does it! The black and white prints are
already in the trunk of Sgt. Bud White's
sedan. ;)
 

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

Image upload not working in browser 4
How to properly insert a landing page within same container beneath an image element? 0
Background image not showing up on html page 3
I am trying to detect Which image id="" was clicked ? 22
Image on header 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Image not changing between "mute" & "un-mute" images. 5
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 43 (members: 1, guests: 42)
Robots: 307

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,825
Latest member
VernonQuy6

Latest Threads

Top