Image Display Size Help

[AlwaysNew]

It turns out the keyboard had curly quotes turned on (not my computer) - hard to see as they're just slightly slanted to the right in HTML. Now that's off and corrected to straight quotes, my original code works! But using a 300ppi image is a great recommendation for hi-res devices. Thanks all for helping.

[Turtle91]

Glad you found the curly quotes but be very careful with your - it just works - statement.

Your code does NOT work....at the least, there are a few important errors you should fix.

• You don't need the </img>...the tag is self closing
• Setting both height and width may cause your image to lose it's aspect ratio - only set one (normally width) and the other will auto adjust to the correct ratio
• You are setting the width multiple times...you only need one...multiple entries can slow down the renderer because it has to figure out which one to apply
• Why are you using a span at all - just to put the graphic on a new line?? How about just putting it in its own block level tag?
• (This is mostly just annoying not an error) You don't need a unit after a 0 (zero) dimension...zero of anything is zero...in any case, be consistent.
• Also, FYI, using a % for a padding/margin can cause layout inconsistencies that most try to avoid. Think about the difference between a 4" and a 10" screen. To keep layout internally consistent normally one would tie spacing to the font size.
• Also-Also, in this case having both margin and padding can be confusing to you and make the render take longer - they are effectively doing the same thing in this instance, making the spacing a whopping 4%. Just choose one of them to set the distance where you want it.

Originally Posted by AlwaysNew

<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%;
}

I totally understand that you might not be uber-familiar with CSS/HTML, just realize that some of those software packages that do a great job laying out a for-print-document can really "get intimate with a canine" when it comes to electronic, reflowable, documents.

Here is a good recommendation that does what you say you want in a much simpler manner. Try it and see...

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

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

[JSWolf]

Do not use 2% for your margin top. That changes between different Readers. A Kindle PW4, Kobo Libra H2O, Kobo Aura H2O, Kobo Forma, and Kindle Basic, Pocketbook Inkpad X, and Pockebook Inkpad 3 Pro will all display the space differently because they all have different size screens. So 2% will be different.

Use a space like margin-top: 1em; as that will be much more consistent. % is usually not good to use.

[AlwaysNew]

Thanks @Turtle91 @JSWolf for your helpful info. After much hair pulling I've given up. Deleted the bloody thing and have done with it. Unless I pay a professional, it's just not worth my time. Infuriating. I'm not really cut out for this. I'm a writer not a coder. Thanks anyway.

[JSWolf]

Originally Posted by AlwaysNew

Thanks @Turtle91 @JSWolf for your helpful info. After much hair pulling I've given up. Deleted the bloody thing and have done with it. Unless I pay a professional, it's just not worth my time. Infuriating. I'm not really cut out for this. I'm a writer not a coder. Thanks anyway.

To be honest, learning CSS/HTML is not that difficult. I leaned a lot by diving into the code of a lot of ePub head first.