Image Display Size Help

[AlwaysNew]

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:

<span class=“s3”><img src="images/ne-logo100.png" alt="ne-logo100.png" class=“s2”/></span></img>

CSS:

.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.

[jhowell]

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.

[Turtle91]

try this:

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.

[Jellby]

Originally Posted by Turtle91

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.

[JSWolf]

Do you realize that your square is going to look very very small on a 300DPI Kindle?

[Turtle91]

Originally Posted by Jellby

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??

[AlwaysNew]

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??

[Jellby]

Originally Posted by Turtle91

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]

Originally Posted by AlwaysNew

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?

img.s2 { width: 0.5in }

[JSWolf]

Originally Posted by AlwaysNew

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]

Originally Posted by Jellby

What's wrong with this?

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.

[Jellby]

That is wrong with the OP's requirement, not with the code that does what he/she wants.

[Turtle91]

Originally Posted by JSWolf

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.

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

<div class="image"><img alt="" src="images/ne-logo100.png"/></div>

[Notjohn]

Originally Posted by AlwaysNew

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.

[JSWolf]

Originally Posted by Notjohn

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?