Responsive resize image

Working on Build a tribute page. Could someone please guide me on:
“The img element should responsively resize, relative to the width of its parent element, without exceeding its original size”.

HTML:
<!DOCTYPE html>
<html>
  <head>
  </head>
    <body id="main">
    <h1 id="title">Thomas Jefferson</h1>
      <div id="img-div">
        <img  id="image" src="https://cdn.historycollection.com/wp-content/uploads/2019/01/Official_Presidential_portrait_of_Thomas_Jefferson_by_Rembrandt_Peale_1800cropped.jpg" height=240px alt="Thomas Jefferson">
        <figcaption id="img-caption">Thomas Jefferson</figcaption>
      </div>
      <br>
      <br>
      <ul id="tribute-info">
        <li>Third President of the United States.</li>
        <li>Born April 13, 1743 and died July 4, 1826.</li>
        <li>Author of the Declaration of Independence.</li>
        <li>Signed the Act Prohibiting Importation of Slaves.</li>
        <li>Plantation owner, lawyer, politician.</li>
        <li>Second Governor of Virginia during American Revolutionary War period.</li>
        <li>Founded University of Virginia.</li>
      </ul>
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Thomas_Jefferson" target="_blank">Find out more about Thomas Jefferson on Wikipedia.</a>
  </body> 
</html>

CSS:
#title {
  text-align: center;
 }
#img-div {
  text-align: center;
  }
body {
  background-color: silver;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).