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.
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
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.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
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 using this HTML
<img src="stone.png" height="100" width="100"></img>
to display a tiny image that originally contains 5x5 pixels to instead be 100x100. The image becomes extremely blurry when I do this. Is there any way I ca retain the intentional "pixely" design when resizing it?
Note: I don't want to repeat the image, I just want to display it in a larger way and keep each pixel distinct.
No, there isn't.
When you scale an image of 5x5 pixels to 100x100 there needs to be 20x interpolated pixels for each axis (generated synthetically using bi-cubic or bi-linear interpolation) between each points which will always result in a blurry image.
You cannot even fix a huge scale-up like that in dedicated software.
The only solution is to create your image at the intended resolution or close to it. It's also better to down-scale an image as you would remove information rather then generate it.
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.
Let's say I have < img src="http://www.always-going-to-be-absolute.com/images/thisimage1.jpg" width= "some px" /> (only a .jpg or .gif). With only the width specified, are there any (any!) circumstances under which the height and width of the image may not scale accordingly, or may not scale at all, assuming there is no CSS or other code affecting it? I can't think of any circumstances (and research doesn't bring up any), but I'd like to be sure by running this by some people who have more experience than I do.
thanks!
No there are not. However, note that is it quicker to load an image of the correct size.
If any other css code or anything else is not affecting it, then I don't think there should be a problem. Try using images of correct sizes though. Helps reduce loading time and preserve quality of images as well. Try it out and if you get any scaling or other problems, you know where to ask, right? ^_^
It looks like you're scaling the images through width. From section 13.7 of the HTML 4 specification:
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
I think the only two problems you may have here are:
Small images: If the image is 10x10px and is scaled to fit a 1000x1000px container, it will be pretty hard to make out what the image is supposed to be.
Thin images: If your container is 1000x1000px and the image is 250x25px, scaling the image to fit the container will result in a 1000x100px image.
OR, is there a way to at least determine the width of an image from a URL.jpg (if it's not specified in the html) without downloading the image?
In front-end JavaScript you can simply:
img.clientWidth;
img.clientHeight;
On the back-end, PHP has a getimagesize() function which returns height and width. I imagine other languages also have similar functions.