Quote:
Originally Posted by JSWolf
Wouldn't the image have to split to the next screen it if did not fit on the space available on the screen?
|
If the width of the image is higher than its heigh, then the property "display: inline-block" will avoid splitting. It can generate a blank space but the image won't split.
The OP had employed in the "image-setup" style, the property "text-align: center" and in the img tag the property "display: block". But "text-align: center" is useless if an element is displayed as block. That one, only works for "inline" or "inline-block" elements. So to avoid properties "page-break-inside: avoid" and "margin: 0 auto", with "display: inline-block" the property "text-align: center" will work, the image always will be centered (no matter the width) and won't split. The code employed is minimun.