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...
Code:
<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:
Code:
.calibre10 {
height: 550px;
width: 666px
}
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:
Code:
<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.