Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-17-2020, 01:47 PM   #1
AlwaysNew
Member
AlwaysNew began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Jun 2020
Device: Kindle
Exclamation Image Display Size Help

I'm still fairly new at this so please be patient.

I'm trying to display a small image (ne-logo.png) and resize it 50% using CSS in the stylesheet. But whatever I change on the CSS makes no difference! Please tell me where I'm going wrong.

The image is 100px square at 72dpi.

HTML:
Code:
<span class=“s3”><img src="images/ne-logo100.png" alt="ne-logo100.png" class=“s2”/></span></img>
CSS:
Code:
.s2 { /* NE LOGO */
  height: 50%;
  width: 50%
}
.s3 { /* NE LOGO */
  display: inline-block;
  vertical-align: baseline;
  width: 1.336em;
  margin-left: 0%;
  margin-top: 2%;
  padding-top: 2%;
  margin-right: 0;
  margin-bottom: 0%;
  text-indent: 0;
  max-width: 50%;
  width: 100.000%;
}
Thanks in advance.
AlwaysNew is offline   Reply With Quote
Old 07-17-2020, 02:12 PM   #2
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 7,054
Karma: 91577715
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
You want the width to be 50% of what? The screen width?

Hopefully your actual HTML file uses straight quotes instead of the curly ones in your sample.

Your s3 class has conflicting width properties.
jhowell is offline   Reply With Quote
Advert
Old 07-17-2020, 02:33 PM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,330
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
try this:

Code:
div.image {margin:2em auto}
div.image img {width:50%; max-width:100px}

<div class="image"><img alt="" src="images/ne-logo100.png"/></div>
As jhowell mentioned, the 50% is half your screen width (or half the width of the container)... the max-width tells it to NOT display larger than the actual pixel size of the image 100px so it doesn't get overblown and pixelated.... that alt="images/ne-logo100.png" is actually worse than nothing at all... you can adjust the div.image settings to style it however you wish.

Last edited by Turtle91; 07-18-2020 at 07:56 AM. Reason: Clarification of purpose for 'max-width'
Turtle91 is offline   Reply With Quote
Old 07-17-2020, 03:45 PM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Turtle91 View Post
the max-width tells it to NOT display larger than the actual pixel size of the image so it doesn't get overblown and pixelated....
Not really, because px is an absolute unit roughly equal to 1/96th of an inch, that has no relation, it is *not* a pixel.
Jellby is offline   Reply With Quote
Old 07-17-2020, 04:08 PM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,448
Karma: 145491800
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Do you realize that your square is going to look very very small on a 300DPI Kindle?
JSWolf is offline   Reply With Quote
Advert
Old 07-17-2020, 09:16 PM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,330
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by Jellby View Post
Not really, because px is an absolute unit roughly equal to 1/96th of an inch, that has no relation, it is *not* a pixel.
You are, of course, technically correct. However, in the eBook realm - with the current bevy of hardware and software - it is practically the same thing. Do you know of a different technique to prevent blowing out small images - I'd be happy to use something that works better??
Turtle91 is offline   Reply With Quote
Old 07-18-2020, 04:09 AM   #7
AlwaysNew
Member
AlwaysNew began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Jun 2020
Device: Kindle
OK, now I'm getting more confused. All I'm trying to do is get a logo to appear on the title page of my book, centered on the page below the author name. It needs to appear about a half inch square on any device, whether it's a Paperwhite or a Kindle Fire.

Should I have more than one version? or use CSS to display it at varying sizes for each screen??
AlwaysNew is offline   Reply With Quote
Old 07-18-2020, 06:44 AM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Turtle91 View Post
Do you know of a different technique to prevent blowing out small images - I'd be happy to use something that works better??
Not without querying the device resolution, something that can probably be done in ePub 3 with JavaScript, but not in ePub 2. I'm not saying your code/solution is wrong, only that the description can be misleading.

By the way, I believe that a "px" is, in compliant devices, guaranteed to be an integer number of actual pixels, so at least the image should look fine. Still, you need to know the pixel size of the image.
Jellby is offline   Reply With Quote
Old 07-18-2020, 06:45 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by AlwaysNew View Post
It needs to appear about a half inch square on any device, whether it's a Paperwhite or a Kindle Fire.
What's wrong with this?
Code:
img.s2 { width: 0.5in }
Jellby is offline   Reply With Quote
Old 07-18-2020, 08:16 AM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,448
Karma: 145491800
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by AlwaysNew View Post
OK, now I'm getting more confused. All I'm trying to do is get a logo to appear on the title page of my book, centered on the page below the author name. It needs to appear about a half inch square on any device, whether it's a Paperwhite or a Kindle Fire.

Should I have more than one version? or use CSS to display it at varying sizes for each screen??
The problem is that there are devices with different size screens. eInk at 5", 6", 6.8", 7", 7.8" 8", 9.7", 10.3", and 13.3" with varying resolutions and then there are LCD tablets at different sizes, 5", 7", 7.8", 9.7", 10.5", 12.5", and other sizes.. You cannot get your image to do what you want. The best solution given the size of the image is to just center it where you want and forget reducing the size. Making it even smaller is not a good idea as it will then be even more difficult to see it as it will be too small.
JSWolf is offline   Reply With Quote
Old 07-18-2020, 08:18 AM   #11
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,448
Karma: 145491800
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Jellby View Post
What's wrong with this?
Code:
img.s2 { width: 0.5in }
There's a lot wrong with that. The image is 100px square. Imagine that being blown up to 1/2 an inch on an 8" eInk screen or on a 10.3" LCD screen.
JSWolf is offline   Reply With Quote
Old 07-18-2020, 08:39 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
That is wrong with the OP's requirement, not with the code that does what he/she wants.
Jellby is offline   Reply With Quote
Old 07-18-2020, 10:33 AM   #13
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,330
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by JSWolf View Post
There's a lot wrong with that. The image is 100px square. Imagine that being blown up to 1/2 an inch on an 8" eInk screen or on a 10.3" LCD screen.
It actually doesn't matter the dimensions of the screen - using 'width=.5in' will make it .5in on any device.

The problem is the resolution of the screen.

A high resolution screen (@500 PPI Pixel density) will make the image (at 100 pixels wide) blown out - it's stretching the 100 pixels to fill 250 pixels (.5 x 500).

That's why it is always better to have as high a resolution image as is feasible. Most devices/apps do a pretty good job compressing an image...not so much expanding one that is too small.

For the OP: Most people would want the image to be relative to the rest of the document/font/screen size...it looks awfully funny to have an out of proportion image. That's why my previous example had a percentage with a limit on how big it gets. However, if you want the image to be .5 inch wide (because, presumably, you are stuck in the paper print paradigm ), then use width=.5in....but I would get a higher resolution image, 250-300 pixels square.

Code:
div.image {margin:2em auto; width:.5in}

<div class="image"><img alt="" src="images/ne-logo100.png"/></div>
Turtle91 is offline   Reply With Quote
Old 07-19-2020, 04:30 PM   #14
Notjohn
mostly an observer
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 1,518
Karma: 987654
Join Date: Dec 2012
Device: Kindle
Quote:
Originally Posted by AlwaysNew View Post
All I'm trying to do is get a logo to appear on the title page of my book, centered on the page below the author name. It needs to appear about a half inch square on any device, whether it's a Paperwhite or a Kindle Fire.
I have precisely the same wish, and no desire to get into media calls, so I upload a colophon 100 pixels square with a width=10%. It's a bit oversized on the very early Kindles, which ignore the 10% instruction, but not objectionably so, and looks fine on the current Paperwhite and the Fire tablet.
Notjohn is offline   Reply With Quote
Old 07-19-2020, 04:35 PM   #15
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 79,448
Karma: 145491800
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Notjohn View Post
I have precisely the same wish, and no desire to get into media calls, so I upload a colophon 100 pixels square with a width=10%. It's a bit oversized on the very early Kindles, which ignore the 10% instruction, but not objectionably so, and looks fine on the current Paperwhite and the Fire tablet.
But how does it look on 7" and 8" screens?
JSWolf is offline   Reply With Quote
Reply

Tags
css, image, resize


Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
paste cover image changes image's size pipistrelosone Editor 1 10-07-2016 09:10 AM
Image size JSWolf Feedback 19 11-13-2015 05:16 AM
Image size. UncleIvor ePub 13 04-04-2015 04:15 AM
Display of a png image linked to a svg image roger64 Editor 6 03-13-2015 06:21 AM
Image Size benjaminsolah ePub 13 09-24-2010 11:47 PM


All times are GMT -4. The time now is 05:45 PM.


MobileRead.com is a privately owned, operated and funded community.