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.
Related
I am using firefox which from my research seems to be part of the problem. I specify in the <img> tag that the width should be 360 and the height 215 yet it makes the width 382 and the height 215. I checked and this maintains the original ratio which I am trying to break in my resize. Why does it do this and how do I make it stop? If I want to I should be able to make it have a height of 124358907 and a width of 1.
<img src="myfile.png" height="215" width="360" />
Then when I click on image properties it says that the width is 382 and based on how it looks compared to other images which resized correctly I can confirm that it is a tad too wide.
Firefox version 17.0.1
Just curious, is it in the WYSIWYG editor that the image isn't displaying correctly or is it actually in the browser? I remember having issues with that in older versions of Dreamweaver, certain things would display strangely in Dreamweaver's display, but when you actually open the HTML file in a browser, everything displays as it should. Same with the old Microsoft Front Page. I just use Sublime Text or Notepad++ now...
Seriously dude? Check this out, you can resize your img tag, you are probably doing something wrong at your side
Demo
CSS
img {
height: 15px;
width: 200px;
}
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.
I've been working on this site for quite a while, and I've finally got it looking pretty nice I think. But I've noticed a problem with the home page on IE8 (no other browser has this problem that i've used)
in IE8, the site looks like this:
Notice the blue bars on the sides of the far right column, they show how wide the <td> is. the content within is 160px as it should be, but the <td> itself is wider than it should be. As you can see in the HTML analyzer on the left, the width is set to "160", however the HTML in the page says:
<td style="width: 160px;max-width:160px"width="160px"align="center"valign="top">
Out of Desperation I've tried a few things obviously. Why does IE continue to hate me? What code can I write to make IE play nice like the rest of the browsers do?
The actual site URL is http://EpicClanWars.com if you wish to dig into source.
Add table-layout: fixed to the <table>'s style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
<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">
If you take the following image:
http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg
place it in an html file with an IMG tag, then resize it to width 160 but do not set the height setting, and are on Firefox, you will see an ugly black line under the image.
For instance:
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" width="160" />
or
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" style="width:160px;" />
(Note I'm using FF 3.6.3 on Ubuntu Linux 8.04 LTS, if that matters.)
Note I don't want to set height because then the image would look funny when all I want to do is change the width so that fits nicely in a column of amazon products. Plus, I cannot always accurately predict the image height, and some APIs to inspect the image may slow a website down too much.
So, why do you think the black line appears, and what can I do programmatically in the HTML or CSS to prevent it? Note I've already tried setting the style of background-color for the image to #FFF and I still get this issue.
Resize the image with JavaScript as needed to prevent distortion by the browser. I do it because only Opera and Chrome "smooth resize" large images to tiny sizes.