how to set the height of an image as a % of the screen?

3 posts / 0 new
Last post


I want to set the height of an image to a % of the screen.

surely a silly question, but the truth is i can't manage to do it.
firstly: can I do that?

I'm using a css like this:
.image70h {
.image70h > img {
height: 100%;

and on the xhtml i write:
<div class="image70h">
<img id ="i1" src="1_1_2_amberes.jpg" alt="La madre de Guzmán finge un cólico" />
<h3>La madre de Guzmán finge un cólico.</h3>
<p>Ed. de Jerónimo Verdussen, Amberes, 1681. </p>

AM I doing something wrong???
IS there any way to achieve that (the height being a % of the screen???

Thank you!!!!!!


note: it used to work on previous versions of iOS, but with the new iOS7 it displays the pictures with this code at full screen.

This would be simple in SVG documents.
If you have only one or two lines of text as for the cover page, do it with SVG and
forget about XHTML. This is ok for EPUB 3 and enables you to provide a scalable image of
good quality.

If you have more text with the requirement for automatic line breaks, XHTML is a good choice.
Indeed the method is styling with CSS and not related to the XHTML content.
It is not specific for EPUB, it is an old and general problem of CSS for (X)HTML.
What you in general have to do is to give the parent element a defined height.
In your case, to get a percentage of the viewport of the user-agent, you have to define the
height of the root element down to the parent element of the image as 100%.
Having this done, the height of an element in percentage can be resolved relative to the
viewport with CSS.
Obviously, if you have additional text, you may have to face the problem, that this does not
fit together with the 70% image into an 100% viewport. You have to take care, that the content
remains accessible for all readers.
For web-pages usually you can do this with the overflow property, not sure how good this works
with special user-agents for EPUB. Therefore maybe not a good idea to combine image and text in such a way in one document.

Note, that it is still simple to scale an SVG document embedded with img to the full width of
the viewport, but to a fraction of the height of the viewport requires similar CSS efforts than for
pixel images. Therefore no improvement to put for example the JPEG into an SVG,
embedding this SVG into the XHTML document. Only a not embedded SVG content document
provides simple options to scale it to the size of the viewport.

The size of the screen is typically not relevant, because often the user-agent does not use
the complete screen, therefore CSS does not care much about this. But if required, you can
use CSS media queries to apply different styles for different screen formats and several other

Hi Pablo, did you fix it?
I am with the same problem, before update the ios7 the image size was ok, but now is bigger.
I don't know how set the height.

Secondary menu