<img alt="thumb" src="thumb.jpg">
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?
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.
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.
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:
<img alt="thumb" src="thumb.jpg">
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.
create a page FullSize.html with <img src="FullSize.jpg"/> and
display tumb with link to that file
<img alt="thumb" src="thumb.jpg">
Related
I have a 'standard' web masthead logo snippet that I use with an SVG logo by preference, the code goes like this;
<div class="site-branding">
<a id="logo" href="/">
<img src="/pathto/logo.svg">
</a>
</div>
The size of the various components are controlled by CSS.
The issue I have is that, while the page renders, the SVG draws first so that it flashes full width before the CSS for the containers constrain it. It seems as if SVG, as XML without size information, gets rendered before an image and by default is the full width of the viewport. If I use a PNG it has inherent size information so is not affected in the same way.
It's not usually a problem, and certainly not after a page is cached but on a slow connection can be obvious and ugly. Even on a faster connection there is often a flash of a larger image.
What do I need to do to prevent this behaviour? It should be said that hard-coding the size of the img tag is my least favourite option.
I'm trying to make text span the entire width of the page, like so:
http://www.thecut.net.au/
I've looked at the source, but am unable to make sense of how they achieve this. Some direction would be useful -- thanks.
Learn how to use your browser's inspector. It's very easy to work out what you wanted to know:
The solution for the website you mention is to use an image. Images are much easier to control the appearance of, especially when accounting for the many different browsers and screen sizes available now.
Two ways to display an image that spans the width of the webpage are:
Image tags: <img id="largeTextImage" src="image URL" style="width:100%;" />
Background Images: <div id="largeTextDiv" style="background: url(image URL) no-repeat top center;"></div>
Image is definitely the way to go if you're trying to reach a pixel perfect look and to simplify your life.
Otherwise, you could also look at using different font-sizes and using media queries so that depending on the width of the window, a different font size would show up. This wouldn't be recommended though.
I'm making a basic html5/css web page. For some reason, when I view the page in the browser, the thumbnail image is showing up as full size. To create the thumbnail, I opened the large original in paint. I resized it to a width of 150px and it calculated the height as 185px. Then I saved it with the thumb name.
Then, in my html code, I have the following:
<img src="../media/tinCanBookCover_thumb.jpg" height="185" width="150" alt="Tin Can Crafts Book" title="Tin Can Crafts Book" >
However, when I view the page, I can tell I'm viewing a small image at a larger size because of the pixels showing. Clicking the image is showing the full size image as expected. Any ideas why it's not showing my thumbnail as thumbnail size? I've done this elsewhere and it worked. I know the page validates, except it's having trouble finding the stylesheet, but I do see the stylesheet changes when I view the page.
I figured it out! I had css to make img 100%. I changed it so it was attached to a class instead of the generic image.
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
Apologies for the incredibly basic question but I have searched the question bank and I honestly can't see a comparable question (or at least, if it is comparable I'm too new to this to discern the relevance).
I'm trying to learn how to insert an image into a webpage. I'm using straight html at the moment not RoR. While I am able to embed an image in my html file and get the image up on screen, I can't seem to preserve the correct orientation - essentially it reproduces my jpg in landscape when it should be portrait.
I'm using the following code:
<img src="/Users/user/images/image.jpg" width="259" height="193" alt="Image" />
Which presents the image with what should be the left hand edge as its base; I have tried switching the dimensions but that simply leads to a taller version of the image, still sitting on what should be the left hand edge. I can't see anything in the html Dog pages that explains this issue...
It seems to be a problem with the EXIF orientation information. I can't offer you a full solution, but you may write a PHP script that will apply the rotation by re-ordering the pixel order of the JPEG and then remove the orientation info from the EXIF.
Check if u have any CSS class that apply on the img
Try to set the width only
<img src="Users/user/images/image.jpg" width="259" alt="Image" />
If you just specify the width, the height will be scaled automatically according to the aspect ratio of the original image, vice versa if you just specify the height.