Using absolute units in img width tends to fail

[icearch]

Using absolute units in img width tends to fail in a lot of reader apps. They simply ignore that and stretch the img to 100% or original size.

Resizing img in advance kinna hurts it's quality, and pretty annoying. Any good way to fix this?

[j.p.s]

Why not use %, especially since you don't know the PPI of the display?

[JSWolf]

One other option is if the absolute units make the image smaller then it is, resize the image to that size. Then you don't have to use absolute units.

[icearch]

Originally Posted by j.p.s

Why not use %, especially since you don't know the PPI of the display?

Using % can have some other problems in certain reader app, but a lot more acceptable. But I prefer learning more things so I'm asking anyway.

As to ppi, I don't think that's how it's working? px is 1/96 in, have nothing to do with pixel so nothing to do with ppi.

[slm]

Originally Posted by icearch

px is 1/96 in, have nothing to do with pixel so nothing to do with ppi.

Not quite: from https://www.w3schools.com/cssref/css_units.php:

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels

I don't know that many modern readers or screens have less than 96ppi, so in practice, I guess, 1/96 in is likely to be accurate.

[Jellby]

Originally Posted by j.p.s

Why not use %, especially since you don't know the PPI of the display?

Because if you want 3cm, % doesn't help. You don't know the ppi, and you don't know the screen size. But if you do know you want 3cm, you should be able to say 3cm, and the device should know what to do with it.

[Turtle91]

This is not perfect, but it seems to cover most cases:

1) try an svg wrapper. That works great for a full screen image. With a little more advanced settings you can make it work great for a less than full screen as well...

if that doesn't work - for whatever reason:

2) use % of your screen size but put a maximum on it to prevent pixelation/fuzziness on a large screen. eg.

  img {width:50%; max-width:600px}

You may need to use height instead of width instead depending on your image aspect ratio and/or if the screen is in landscape or portrait mode (use media queries). eg.

<div class="image">
  img {height:50%; max-height:800px}
</div>

But remember you will probably need to supply a container (<div>) so it can determine what height to use as the percentage used is the % of the container...(what is the height of an auto-scroll page?)...
I set the max height/width using the corresponding dimensions of the image. If it is 600x800 then I use max-width:600px or max-height:800px. This is not perfect, as alluded to above, but it gets it close enough to prevent the over pixelation.

BTW, the svg wrapper handles all those issues for you automagically.

[icearch]

Originally Posted by Turtle91

2) use % of your screen size but put a maximum on it to prevent pixelation/fuzziness on a large screen. eg.

  img {width:50%; max-width:600px}

You may need to use height instead of width instead depending on your image aspect ratio and/or if the screen is in landscape or portrait mode (use media queries). eg.

<div class="image">
  img {height:50%; max-height:800px}
</div>

But remember you will probably need to supply a container (<div>) so it can determine what height to use as the percentage used is the % of the container...(what is the height of an auto-scroll page?)...
.

I have tried this last night, using a div to contain it, set it to 5em height, and 100% height for img. Works great in sigil, but still fails in reader.

[Turtle91]

Did you try #1 option, using an svg wrapper??

Also, what reader are you using?? Some of them are so bad and non-standards compliant, it isn’t worth trying to cater to them.

[icearch]

Originally Posted by Turtle91

Did you try #1 option, using an svg wrapper??

Also, what reader are you using?? Some of them are so bad and non-standards compliant, it isn’t worth trying to cater to them.

I think up #2 myself and tried it before bed. Then this morning I saw your post. I am not at my pc now.

Haven't tried #1, because haven't looking into svg wrapper deeply.

A heap amount reader apps have trouble, Readest, Moon +, FB reader. And it might have something to do with my setting.

So I think the better way might be resize logo to small pic beforehand, this also controls the file size.

I will looking into svg wrapper when I have more free time.

[Quoth]

Originally Posted by Jellby

Because if you want 3cm, % doesn't help. You don't know the ppi, and you don't know the screen size. But if you do know you want 3cm, you should be able to say 3cm, and the device should know what to do with it.

But that won't work on lots of things. Percent is better for larger images. Smaller ones (maybe a little logo, fluerion or QR code) can work even with pt (sometimes that scales with user scaling font) or px.

Actual physical units are only reliable for PDF, which should use them.

[icearch]

I tried the svg wrapper in sigil cover (using my phone), I have to say not very successful.

Something working on one app does not working on others. Some app can't render the svg ones at all. Which is strange because the cover can render correctly.

Need more learning and experimenting.

[icearch]

I have to say it's getting more tedious than resizing pic
.

[JSWolf]

Don't forget to test your images on different screens such as a cell phone and eInk (at least 6"), That way you'll know how well the images display.

Some software allows you to zoom the images, but not all.

[RbnJrg]

Originally Posted by icearch

A heap amount reader apps have trouble, Readest, Moon +, FB reader. And it might have something to do with my setting.

Your issue is due to the apps you are using. Moon +, FB reader are awful; Readest is a nice app but perhaps you haven't configured it correctly and you're allowing the epub's css code to be overwritten with your personal preferences (there are some things in Readest that are not yet properly implemented). Open your epub and test your code with Cantook, Reasily, Lithium, Kobo for Android, PocketBook, Infinity Reader, BookFusion.