Alternative to object-fit with wkhtmltopdf

Question

I am currently trying to export html pages to pdf using wkhtmltopdf, but the object-fit I use to force my images into a square doesn't work; the images end up stretched to fit the square box instead of being cropped properly.

I know for a fact that object-fit doesn't work with wkhtmltopdf, and I've been looking for workarounds (cf Object-fit: cover; alternative? ) but :

• I cannot access the image directly since it's used in a template (for the background method)
• I have no easy way to differentiate between horizontal or vertical images

here's the current snippet I have that doesn't work (works fine on the html though):

  .class .img-box {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
  }

  .class .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

I'm at the point where I start getting a little upset by this, so if anyone knows about a working solution, I'd be glad to know about it. Thanks

Answer 1

The click handler on .load-content removes/replaces nodes present in your code and create new nodes. But these new nodes do not get picked up because this code:

const checkMarks = document.querySelectorAll('.ck');

Runs only one time and picks the checkmarks present at the page load. Try moving this expression inside .parent click handler to see if that helps.

---

Ideally you should be removing the click handler on .parent inside your .load-content click handler. Those handlers are still there and this presents memory leaks. You should be able to fix this by converting your anonymous click handler of .parent into a named function. Then you can simply use removeEventListener and addEventListener to remove and re-add the handlers.