I am trying to embed an image (with a mathematical equation) in an HTML text such that the images scales with text, regardless of what font size is chosen.
Using a simple example image from Wikipedia, an example is shown at http://jsfiddle.net/7ds334hg/show/:
<p>There is a huge demand for long text. Therefore, this paragraph contains a couple of words that are not particularly interesting. Much more interesting is whether the image below is shown correctly. Hmm...</p>
<ul>
<li><p>The following letters should have roughtly the same size: X <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/f5471531a3fe80741a839bc98d49fae862a6439a" alt="X" style="height:1.05em;vertical-align: -3px" /></p>
</li>
</ul>
I am giving an image height in "em" to make sure that the image scales well regardless of the actually chosen font size. In firefox and Chrome, th example works fine.
On Android (5.1.1), however, the image is rendered way too small:
Funnily, shortening the rubbish text makes the the page look correct (http://jsfiddle.net/7ds334hg/1/show/).
How can I fix this such that the images are scaled correctly on most devices?
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 currently trying to build a website that includes a small pixel art image sized up to be larger, and per the internet's recommendation, I'm using rem to make sure everything resizes nicely.
However, I'm run into an issue when sizing the image. When I try to resize it, it treats 1 rem as equal to 1 px. So the following code will display as a 16px by 12px image:
<img src="image.png" width="16rem" height="12rem">
What's going on? According to everything I've read, it should display as a 256px by 192px image. Both my fonts and divs are sizing exactly like I expect, so I don't know why my images are acting up.
Thanks!
The height and width attributes inside an <img> tag are always measured in pixel units – actually you don't write the unit in these attributes normally – just the numbers.
To achieve what you want, use a CSS stylessheet (and in it a rule for a class or ID which you apply to your <img> tag), or use the style attribute inside the img tag, like:
<img src="image.png" style="width:16rem;height:12rem;">
P.S.: Your wrote "per the internet's recommendation, I'm using rem to make sure everything resizes nicely": I don't know which "internet" recommended that to you ;-), but – if at all – it only applies to certain things (first of all font sizes), not to everything, and especially not to images.
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 have a div class with an image src and within that I currently have a div for the dynamic text inside this although am open to suggestions.
<div class=“image-container”>
<img src=“/assets/product.jpg”)>
<div class="preview-container">
<img src="/assets/images/Product_1.jpg" class="prv-img">
<div class="preview-text">
<div class="text-outputs">
<p data-name=“line_1”>SAMPLE TEXT !</p>
<p data-name=“line_2”>SAMPLE TEXT 2</p>
<p data-name=“line_3”>SAMPLE TEXT3</p>
</div>
</div>
</div>
</div>
This image remains the same aspect ratio but the image size changes responsively either by jumping to breakpoint sizes, or for smaller screens sizing continuously dependent on screen width.
As hinted at in the code above, on top of this image I want to superimpose 3 lines of text that give the impression that this text is written on the image of the product itself. For some context, it is a photo of a bottle with a blank white label on it and I want to superimpose some words like, Drink XYX, crafted since 1923, Drink Responsibly
I want the text size, spacing, line height and relative positioning of the text on the image to scale continuously as the image changes size.
Any ideas on how to do this. Is it possible with just css or will I need some javascript too?
Any suggestions would be truly welcome.
Jason
If you don't want to use CSS, then I think you'll need to piggyback on the CSS used to size the image. Assuming you have #media entities that control the image size (either directly, or indirectly by resizing containers), you can add to or duplicate these with similar entries to control the font size in vw units or rem, as appropriate.
I realize this isn't the bulletproof general solution you might like -- if you change themes and the breakpoint widths change, you have to update the CSS also -- but it is a way to do it without JavaScript.
It would be great to have a way to size text proportional to its container.
I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.
However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)
UPDATE:
To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.
I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.
For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.
Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.
So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:
<img src="photo.jpg" style="width:300px; height:200px" />
Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.
Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.
For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.
Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).
Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.
see the solution of this page
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
It's not really possible to make a page resolution-independent when it comes to images.
You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.
You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.
This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.
For retina devices you can also have a second image twice the size and add #2x to the file name...
so if you have a 200px x 300px image called image.jpg you just put in another one that's 400px x 600px and name it image#2x.jpg and retina devices will display that instead.