UPDATE: I’ve figured out how to do this!
Tell us what’s happening:
Hi. I’ve built my website but it did not pass the test. I can only pass either one of these:
- The
img
element should responsively resize, relative to the width of its parent element, without exceeding its original size. - The
img
element should be centered within its parent element.
So my score is always 9/10. I’m stuck and dont know how to fix the code.
Your code so far
HTML:
<header>
<h1 id="title">Dato' Sri Siti Nurhaliza</h1>
<p>Malaysia's Sweetheart</p>
<figure id="img-div">
<img id="image" src="https://cms.tontonextra.com.my/wp-content/uploads/2020/02/Dato-Siti-Nurhaliza-Featured.jpeg" alt="Siti Nurhaliza performed at the MTV Asia Aid concert in Bangkok in 2005.">
<figcaption id="img-caption">Siti Nurhaliza on the night of 2019 Anugerah Juara Lagu 34 (#AJL34)</figcaption>
</figure>
</header>
CSS:
#img-div {
text-align: center;
}
#img-div img {
max-width: 100%;
height: auto;
vertical-align: bottom;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
Your browser information:
Chrome
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
.
Challenge: Build a Tribute Page
Link to the challenge: