View Single Post
Old 03-19-2023, 07:29 AM   #11
Quoth
Still reading
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 13,943
Karma: 103895653
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper
if width or height is a percent (like 75% or 100%), the other property must be auto, because that percent is enclosing thing size, not image size, so
width: 50%;
height: 50%;
doesn't give a half size image, it will stretch to half height and width of the screen by default.

If the image is really 800 x 600 pixels (w x h) then these work

Absolute sizing
height: 300px;
width: 400px;

Set based on width and 2.5% of screen margin
height: auto;
width: 95%;

Or if it's a portrait image 1080 wide and 1920 high and you want it a 1/3rd of page
height: 33.3%;
width: auto;


If you want it centred put it in a p or div
<p class="centred"><img class="size2" src="images/image.png" alt="descriptive text"/> </p>
<p class="centred">Some caption</p>

.size2 {
height: auto;
width: 50%
}

.centred {
display: block;
font-family: "Droid Sans", sans-serif;
font-weight: bold;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
text-indent: 0

}

This class will do for a caption too.
Never use "auto" with any margin or padding property.
Quoth is offline   Reply With Quote