I see a problem with using pt
(points) rather than px
(pixels) in HTML. Points are common size values in the print industry and are supposed to translate into 72 points per 1 inch. Pixels became popular in HTML, but the problem with pixels is that virtually every device and/or monitor uses a different number of pixels per inch, so you never know what X-number of pixels will look like when displayed on different devices. Percentage (%
) or em
are relative-based values and are more usable for multiple devices and HTML in general. With percentage you set the percent of the screen on which to display some object. With em
you set everything in relation to 1em, so 0.5em equals half of 1em and 2em equals twice the size of 1em, etc. That is usually more appropriate for text setting than images though. Enough of that, now on to the CSS and HTML...
<img src="picture1.jpg" alt="" style=" width:287.76pt; height:291.12pt;"/>
The style=" width:287.76pt; height:291.12pt;"
statement is incorrect and I think useless and therefore is probably ignored.
I see no CSS class call in the img
tag, so I'm guessing it is applied to the tag that includes the img
tag (surrounds it in other words). If so, then class calibre10
should cause the image sizes to be height=1099px and width=1332px. I would try changing class calibre10
to something like:
This should display the whole image across most of the screen. I basically divided each value by 2.
If you wanted to set the image size by HTML alone, you could write it as:
<img src="picture1.jpg" width="550" height="666" />
But this will take a lot more editing.
In summation, it looks like the HTML code in img
tags as far as height and width is being ignored because it is syntactically incorrect, so it is probably easiest to just edit the CSS to use height and width that are nearer to the screen size.