To avoid that images exceed the page boundaries I use the following CSS:

	img { 
		display:block;  
		margin-left:auto; margin-right:auto; 
		max-width: 170mm;
		max-height: 250mm; 
		counter-increment: figures;
	}

That works fine, big images are scaled properly!

However, if I add CSS to generate a image caption:

	img::after {
		display:block;
		text-align:center;
		content: 'Figure ' counter(figures) ' - ' attr('alt');
	}

... there is no scaling at all - neither property 'width' nor property 'max-width' have any effect on the rendered image!

- - -
Johann

Once you add a ::before or ::after pseudo-element, the markup ends up something like this:

<img>
    <::before>...</::before>
    <!-- actual image is displayed here -->
    <::after>...</::after>
</img>

However, the width and max-width properties are still applied to the outer <img> block, not the actual bitmap image itself, that is now only one of the children of this block. As a result things don't appear the way you expect, and it may be necessary to use slightly different markup to achieve the layout that you would like.

Thank You, Michael
I've already changed the markup!

- - -
Johann