The release of pdfHTML 3.0.2 includes a number of bug fixes as well as useful feature additions. Among those additional feature is support for the CSS object-fit property in converted PDF's.

The object-fit property allows for precise reformatting and design of image and video objects in PDF's. Often used in company logos as well as articles, the object-fit property is an excellent addition to pdfHTML's suite of features. More information regarding the object-fit property can be found at this link.

object-fit in Practice:

Attached is a PDF converted with pdfHTML which contains examples of all of the 5 potential object-fit properties.

As you can see, each object-fit option is accounted for and displays correctly in the outputted PDF.


Below is the HTML code which was utilized for the above example.

Object-Fit-HTML
<!DOCTYPE html>
<html>
    <head>
        <style>
            .fill {
              width:300px;
              height:400px;
              object-fit:fill;
            }
            .contain {
              width:300px;
              height:400px;
              object-fit:contain;
            }
            .cover {
              width:300px;
              height:400px;
              object-fit:cover;
            }
            .none {
              width:300px;
              height:400px;
              object-fit:none;
            }
            .scale-down {
              width:300px;
              height:400px;
              object-fit:scale-down;
            }
        </style>
    </head>
    <body>
        <h1>Basic Image</h1>
        <img class="dog" src="stock_dog.jpeg" width="500" height="400">

        <h1>object-fit: fill</h1>
        <img class="fill" src="stock_dog.jpeg" alt="Paris" width="500" height="300">

        <h1>object-fit: contain</h1>
        <img class="contain" src="stock_dog.jpeg" alt="Paris" width="500" height="300">

        <h1>object-fit: cover</h1>
        <img class="cover" src="stock_dog.jpeg" alt="Paris" width="500" height="300">

        <h1>object-fit: none</h1>
        <img class="none" src="stock_dog.jpeg" alt="Paris" width="500" height="300">

        <h1>object-fit: scale-down</h1>
        <img class="scale-down" src="stock_dog.jpeg" alt="Paris" width="500" height="300">
    </body>
</html>


In order to convert HTML code which contains images, it is necessary to set the Base URI to a directory which contains said images. Below is a short example which demonstrates that converter property.