Why is the image out of div when printing?

Question

This my style:

    <style>
    .floating-box {
        display: inline-block;
        width: 150px;
        height: 75px;
        margin: 10px;
        border: 3px solid #73AD21; 

    }
    img {
        width: 100%;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
    }

</style>

My result

When I run it, the result is fine when just display it in HTML, but when I try to print using DOMPDF, the result is an image out of a div such as images, can you help me?

<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>

etc

Answer 1

Use only physical dimensions (in, cm, ft, etc) because printing device measures their content in inches, centimetre, feet etc. pixel is depend on your monitor.