On my HTML page, I have a Bootstrap container with responsive images. When the page is viewed in a browser, I'd like to give users the option to print the page and receive a well-rendered PDF. However, I'm encountering issues where some images are getting distorted during page transitions.
https://i.sstatic.net/NamEB.jpg
The images on the page are within thumbnail classes.
{% forloop ----- %}
<div class="thumbnail">
<img class="ImageShot" src="{{i.HQ_image.url}}">
</div>
{% endfor %}