Menu
<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?
241
Press Windows Key + Shift + Enter together to switch to fullscreen mode.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.
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.
142
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.
32
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
