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.
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 apologize if this is not the correct community to ask, but I believe this has to do with HTML so I'm asking here.
I need a small banner with credit card icons (21px high).
I made it in PS and resized it to 21px height (auto width), but I wasn't satisfied with the sharpness.
I now load the full image in HTML and using height and width image tag attributes resize it to the same size I did in PS, but the result is much better.
1) Resized with HTML
2) Resized with PS
Chrome developer tool shows that both of the images are the same dimensions.
Why is there such a difference?
Browsers just display it as it would be 21px high, but higher dpi screens may use the full image to make it sharper. As in the screenshot you shared, both rows are actually ~90px high. Height doesn't actually resize the image itself, it just stretchs it to a smaller area.
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
From w3schools
Tools being used:
Knockout 3.1
MVC 5
I have a list of documents to view. My image placeholder is like this:
<img src="" data-bind="attr: { src: '#Url.HttpRouteUrl("DefaultApi", New With {.controller = "document"})?documentID=' + DocumentID(), title: FileName}" />
I cache the image with my controller, so only on the first load do I have an issue.
But basically, when the image is loaded, the page doesn't know what size the image will be and shrinks down, then when the image is loaded it expands to its regular size.
Any thoughts?
To fix this, add a containing div around the image. Give it a min-height and min-width that doesn't break your layout. This way, while the image is loading, your end users don't see a broken layout, or a "stutter" as your image is bound as the source for the element.
I've installed Magic Zoom in to my Big Cartel website, the zoom function works fine however the product is not actually zooming in?
http://www.generyanart.com/product/house-by-the-sea this is the website - I was just wondering what i needed to do to fix this issue, as i would like the zoom function to show the detail of the piece!
thanks
There are 2 issues:
1: To zoom an image, one image has to be larger than the other. Your two images are the same size. Look carefully at the href and src here and you'll see they reference the same image:
`<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/142875802/max_h-1000+max_w-1000/House-By-The-Sea-A32.jpg" alt="Image of House By The Sea"/>`
Either make your main image (src) smaller in width/height or make your large image (href) bigger in width/height.
2: You must also fix some CSS. The following CSS rule in your stylesheet is reducing the zoom image to the width of the zoom window.
To display the image at its original (larger) size, add the following CSS:
.MagicZoomBigImageCont img { max-width:none !important; }
3: Not required, but because this particular image zoom is so large, it would look good enlarged to full-screen. That's possible on click if you use Magic Zoom Plus instead of Magic Zoom.
Is there a way to get Firefox (or a browser in general) to scale an image in an HTML image tag automatically depending on the window size, and then expand the image to full size upon clicking on it, in the same way that the browser displays an image if you view it directly (right click and hit view image)?
You can't achieve the part where you want to make the image larger using click without some JS, but if you want the image to scale according to the browser size, you can use this in your CSS stylesheet:
img {
max-width: 100%;
}
Read more about this here.