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”.

<!DOCTYPE html>
    <body id="main">
    <h1 id="title">Thomas Jefferson</h1>
      <div id="img-div">
        <img  id="image" src="" height=240px alt="Thomas Jefferson">
        <figcaption id="img-caption">Thomas Jefferson</figcaption>
      <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>
      <a id="tribute-link" href="" target="_blank">Find out more about Thomas Jefferson on Wikipedia.</a>

#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 (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.