Suppose I have a single div element on a page like so:
Where the chapter/page is styled as follows:
I can't quite figure out how to place the image inside of the page's text block, at a maximum width (landscape) or height (portrait). The following styling still allows the image to stretch to its native size instead of the page's text block size.
I've tried different approaches of (max-) width/height in percent or pt for both div and img but to no avail. What am I missing?
<chapter id="chaper-1">
<div class="center portrait">
<img src="images/image-001.jpeg" alt="" />
</div>
</chapter>
Where the chapter/page is styled as follows:
@page {
size: 7in 8.5in; /* page: 504pt 612pt */
margin-top: 42pt;
margin-right: 92pt;
margin-bottom: 70pt;
margin-left: 77pt;
}
I can't quite figure out how to place the image inside of the page's text block, at a maximum width (landscape) or height (portrait). The following styling still allows the image to stretch to its native size instead of the page's text block size.
div {
}
div.center {
text-align: center;
}
div.landscape {
width: 100%; /* 355pt */
max-width: 100%;
}
div.landscape > img {
max-width: 100%;
/* max-height, height: auto; */
}
div.portrait {
height: 100%; /* 500pt */
max-height: 100%;
}
div.portrait > img {
/*max-width, width: auto; */
max-height: 100%;
}
I've tried different approaches of (max-) width/height in percent or pt for both div and img but to no avail. What am I missing?