Suppose I have a single div element on a page like so:

<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?

Can you specify the height in absolute pt units instead of a percentage? Percentage heights don't work right unless all the elements up to the root element have an explicit height specified.

When I specify the div's dimensions in pt, everything seems to work.

I assumed that the @page dimensions with its margin (which is absolute inches) trickle down from the chapter to the div to the image. Is that not so?

Not if any block on the way has height: auto, unfortunately. That's why you often webpages with rules like:

html, body { height: 100% }

But specifying heights like this is trickier for paged media than a browser window.