Le format d'impression ne peut pas fixer la position dans la div html

Question

J'ai un problème pour imprimer des images dans certains formats de position. J'ai besoin de mettre toutes les 8 images sur une page pour les afficher dans l'aperçu avant impression.

J'utilise ci-dessous cet exemple de codage de ce format pour faire le réglage de la position de chaque image div, parce que 4 lignes sur 1 page, donc j'ai essayé d'utiliser 100% diviser 4, puis obtenir la valeur de hauteur est 25%, mais cela ne peut pas fonctionner dans l'aperçu avant impression de la deuxième page :

<div style="height:25%;width:45%;display:inline-block;">
<img style="max-width: 100%;max-height: 90%;height:100%;width:100%" id="img_8" class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
</div>

Voici mon jsfiddle, mon problème apparaîtra dans le jsfiddle https://jsfiddle.net/d6h3wfer/

Dans le résultat jsfiddle problème pour afficher la deuxième page dans l'aperçu avant impression ne peut pas obtenir 8 images sur 1 page.

J'espère que quelqu'un pourra me guider pour résoudre ce problème. Merci de votre compréhension.

*Chaque style de div a besoin du même format parce que dans le futur, j'aurai besoin de mettre le format PHP pour boucler chaque image en utilisant le même format de style de div d'image actuel.

Answer 1

J'ai pu résoudre le problème à l'aide d'une table :

window.print();

@media print {
  @page {
    size: portrait;
  }
}

table {
  width: 100%;
}

tr {
  height: 25%;
}

td {
  width: 50%;
}

img {
  width: 100%;
}

<table>
  <tr>
    <td>
      <img id="img_8" class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>