By default, we fix image heights to height=315, and let the width be calculated proportionally once the image loads. We therefore ignore the actual image size. This is done to:
  • prevent reflows as the page loads images and can determine their actual sizes, especially is the user opens the page at a given ID in the middle of the page
  • create a more uniform media experience by default, unless a custom image size is actually needed e.g. if the image needs to be larger
When the viewport is narrow enough, mobile CSS takes over and forces block images to fill 100% of the page width instead, removing the scrollbar.
Inline images on the other hand never get a horizontal scrollbar, they are just always capped at viewport width.
When the height argument is given, it changes that default height. Width is still just calculated proportionally to this new custom height.
which renders as:
which renders as:
Here's a very long test image:
Figure 21.
Very long test image
. Source. And some tall inline maths: .
Here's a very long inline https://upload.wikimedia.org/wikipedia/commons/4/45/Qian_Xuan_-_Early_Autumn.jpg test image:


  1. Image argument
  2. Image
  3. Macro
  4. OurBigBook Markup
  5. OurBigBook Project