tags:

views:

44

answers:

4
<a href=FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

When the above thumb is clicked the browser will display FullSize.jpg sized to fit the client window of the browser and when the cursor moves over it a '+' will appear to signify that clicking the image will display it full size. What I want to do is display the image full size in the first place, without requiring the user to click it to get full size. How does one do this?

A: 

Display the full image: <img alt="full image" src="FullSize.jpg" />?

Edit Ah, I now know what you mean. Like David Thomas said, this depends on the browser. If you want the picture to be shown fullsize you can't link to the image directly. With HTML only you can do something like this:

<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>

This will open a new HTML page, which will display your image:

fullsize.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Your image title</title>
  </head>
  <body>
    <img src="FullSize.jpg" style="width:100%;height:100%;" alt="" />
  </body>
</html>

But in the end this isn't really the way to go. The best thing to do is to give the user the choice of how things are displayed and don't force something on them. If they work on a lower resolution and you display a huge image in full size, there's no way for them to change it. Best to just link to the image and if the user decides he/she wants to view it full screen, they can click the image so the browser resizes it.

Alec
A: 

Just remove the anchor </a> that surrounds your image. If you want to "guarantee" to display it at full size, add width="100%" in your <img /> tag.

Also, to fully display it, it shouldn't be anchored anywhere. Just post your image immediately in a <body> tag.

The Elite Gentleman
I can't display it full size where it is, there is only room for the thumb.
Jim
I'm assuming there's a CSS (something like `a img { ...}`) which has been given a fixed width, hence your image isn't displayed in full-screen. Comment out the `width` declaration in the CSS.
The Elite Gentleman
@Jim, there is no room to show the full size image, but you want to show the full size image? Does not compute...
Alec
@Alec The image is too large to fit the space available for it so a reduced version is put there, with a link to the original full size version.
Jim
@Jim, ah check. I updated my answer with a possible solution.
Alec
@Alec, that's what I said....
The Elite Gentleman
Not really, but yes, we mean the same thing.
Alec
A: 

create a page FullSize.html with <img src="FullSize.jpg"/> and

display tumb with link to that file

<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>

jcubic
+2  A: 

Unfortunately, what you describe is a browser UI feature (or 'bug,' depending on your point of view), and can only be enabled/disabled by the user. Usually via the 'edit preferences' options.

It's only done if the image at its full size is larger than the view-port, so that the user can see the full image without having to scroll around, it's done 'live' so the image itself isn't compressed/resized, just scaled to fit the viewport. It's also immediately, and intuitively, un-doable by the user in just one-click. I'm not sure that, if there were a way around it, I could recommend such a technique, especially since it's a feature that I'm happy with far more often, as a developer and user, than I'm displeased by it.

The only way around it, that I can think of is to find the image's native height/width, wrap it in a div with those dimensions (plus a little padding). I'm not sure that it will work, but it's the only thing that comes to mind now I'm thinking about it.

David Thomas