[RbnJrg]

If you also want to take into account the ereader in landscape position, use the following code:

1. In your .css file:

p {
  text-indent: 1.2em; /*change this if you wish */
  text-align: justify; /* change this if you wish */
  font-size: 1em: /* change this if you wish */
  font-family: "Arial", sans-serif; /* change this if you wish */
  margin: 0; /* change this if you wish */
}

h2 {
  font-size: 1.2em; /* change this if you wish */
  text-align: justify; /* change this is you wish */
  -webkit-column-break-before: always !important; /* this is for epub3 */
  page-break-before: always !important; /* this is for epub2 */
  break-before: always !important; /* this is also for epub3 */
}

.container {
  margin: 0; /* change this if you wish */
}

.picture {
  width: 100%;
  height: auto;
  max-height: 50vh; /* You can change this for a higher value if you wish */
}

2. In your .xhtml file:

  <h2>Your definition</h2>

  <div class="container">
    <svg class="picture" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 xxx yyy" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="xxx" height="yyy" xlink:href="../Images/your_image.jpg"/></svg>
  </div>

  <p>Your text</p>

To generate the <svg> code you have a good Sigil plugin that will do the work for you.

The image need to have and adaptative height, for that reason I give the height to the svg element and not to the div (with a fix height, is better to set the height in the div). Try the code in portrait and landscape mode and you'll understand better how it works.