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;
}