I am new to coding working on the legacy responsive webpage project and can’t get image to work, although it says my height of auto is correct. My full code and instructions below:
Your img element should have a display of block
Your #image should have a max-width of 100%
Your #image should have a height of auto
Your #image should be centered within its parent
Html code:
<style>
body{
font-family: calibri;
}
</style>
<main id="main">
<h1 id="title">Tyler, the Creator</h1>
<figure id="img-div">
<img id="image" src="https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/wp-cms/uploads/2018/10/p-2-a-creator-in-bloom-FA1118TYLE001.jpg" alt="Tyler, the Creator posing">
<figcaption id="img-caption">
Tyler, the Creator c. 2017
</figcaption>
</figure>
<div id="info">
<div id="tribute-info">
<p>
Tyler Gregory Okonma, professionally known as Tyler, the Creator, is an American rapper and record producer. Following a large contribution to Odd Future's early work, Tyler released his debut solo mixtape, Bastard, in 2009.After releasing his debut studio album, Goblin, via XL Recordings in April 2011, he signed a joint deal with RED Distribution and Sony Music Entertainment for himself and his label, Odd Future Records.</p>
</div>
<a href="https://www.fastcompany.com/90245399/a-creator-in-bloom" id="tribute-link" target="_blank">
<div class="out">
<div class="in">
<p>LEARN MORE</p>
</div>
</div>
</div>
</main >
</div>
<a href="https://www.fastcompany.com/90245399/a-creator-in-bloom" id="tribute-link" target="_blank">
<div class="out">
<div class="in">
<p>LEARN MORE</p>
</div>
</div>
Css code:
#image{
max-width: 100%;
height: auto;
display: block;