gif not displaying on reader

[Jellby]

Originally Posted by JLius

When I use "width: 5em", the .gif is no longer centered.
I tried font-size: 1em instead, but that does not make the .gif rescale. Any other suggestions?

Show the code, please. "font-size: 1em" is a no-op, I don't know what you expect to get from that.

Originally Posted by Notjohn

Should I be adding max-width="100%" to my style sheet to prevent such over-runs?

It will only prevent it as long as the reader obeys the CSS (which is not only the case). You can also use an SVG wrapper for the cover, the code for which you can find elsewhere in the forum.

[JLius]

@Jelby

I'm just trying to get the .gif to scale along when you change font-size on a reader.

The code:

.stroke {
  display: block;  
  margin-top: 1.35em;
	text-indent:0em;
	text-align:center;
}

Html:

<p class="stroke">

    <img src="Stroke2.gif" alt="Afbeelding"/>

  </p>

@Notjohn

 <div>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="100%" height="100%" viewBox="0 0 2480 3508"
                preserveAspectRatio="xMidYMid meet">
                <image width="2480" height="3508" xlink:href="cover.jpg"/>
            </svg>
        </div>
    </body>
</html>

[Jellby]

Try adding this CSS:

.stroke img {
  width: 5em; /*or whatever is appropriate */
}

Or, if you have several images with different sizes:

<p class="stroke">
    <img src="Stroke1.gif" alt="Afbeelding" id="img1"/>
</p>

<p class="stroke">
    <img src="Stroke2.gif" alt="Afbeelding" id="img2"/>
</p>

img#img1 {
  width: 3em;
}
img#img2 {
  width: 5em;
}

PS. Do you actually want "Afbeelding" to show up when the image cannot be displayed? Think of text-to-speech, for instance.

[JLius]

Yes! That works, thank you.
I changed "afbeelding" to break, cause that's what it's supposed to be, a scene break.