![]() |
#1 |
Member
![]() Posts: 14
Karma: 10
Join Date: Jun 2020
Device: Kindle
|
![]()
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> 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%; } |
![]() |
![]() |
![]() |
#2 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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> Last edited by Turtle91; 07-18-2020 at 07:56 AM. Reason: Clarification of purpose for 'max-width' |
![]() |
![]() |
![]() |
#4 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
![]() |
![]() |
![]() |
#5 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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?
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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
|
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??
|
![]() |
![]() |
![]() |
#7 |
Member
![]() 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?? |
![]() |
![]() |
![]() |
#8 | |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#9 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,545
Karma: 19001583
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
![]() |
![]() |
![]() |
#10 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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:
|
|
![]() |
![]() |
![]() |
#11 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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
|
|
![]() |
![]() |
![]() |
#12 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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.
|
![]() |
![]() |
![]() |
#13 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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:
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 ![]() Code:
div.image {margin:2em auto; width:.5in}
<div class="image"><img alt="" src="images/ne-logo100.png"/></div>
|
|
![]() |
![]() |
![]() |
#14 |
mostly an observer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,518
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
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.
|
![]() |
![]() |
![]() |
#15 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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:
|
|
![]() |
![]() |
![]() |
Tags |
css, image, resize |
|
![]() |
||||
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 |