[JSWolf]

I have an ePub where there graphic under the chapter title. The graphic is 1200 lines long. That's fine. But what I want is for the graphic not to exceed the window which it is doing now. How can a graphic be coded such that it doesn't exceed the space reaming after the chapter title?

Below is the relevant code fo the section and the CSS code that goes with it.

<h2 class="h2">CHAPTER</h2>
<h2 class="h2n">Two</h2>
<p class="image2"><img alt="image" src="../images/ch2.jpg"/></p>

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-width: 100%;
  max-height: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.h2 /*"chapter"*/ {
  font-size: 1em;
  margin-top: 0.8em;
  margin-bottom: 0;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-weight: normal;
  font-style: italic;
}
.h2n /*chapter number*/ {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 0.8em;;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align: center;
}
.image2 {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-weight: normal;
}