I am getting 9/10 on checking, please me out in finding that one mistake…
Hello!
It looks like your img properties in your CSS don’t define a max width. Try setting your “width” and “height” to “max-width” and “max-height”.
This will keep your image looking the same for you, but would shrink it down if I loaded your page on my mobile phone.
it’s still 9/10…
Hi, i was stuck at this point too. Im pretty new to this but managed to pass the test by making the image container a flexbox by using:
#img-div{
background-color: white;
display: flex;
flex-direction: column;
and then assigning the info in the responsive image tutorial to the image:
#image{
align-item: center;
max-width: 100%;
height: auto;
I hope this helps… if anyone who is more experienced can point out flaws i would be grateful! I dont want to be providing the incorrect info
The image is an inline element. Make it display: block
. For it to resize with the container make the width: 100%
, height: auto
. To center it use margin: 0 auto
.
img{
display: block;
height: auto;
width: 100%;
margin: 0 auto;
}
Remove the rest of the styling on the img
element. Happy Coding!
@nibble Here is my original code that didn’t work:
.image{
max-width: 100%;
height: auto;
display: block;
}
In another thread I found this code:
#image{
width: 100%;
height: auto;
max-width: 750px;
margin-left: auto;
margin-right: auto;
display: block;
}
The code worked and the tests gave me 10/10 but, I don’t know why. I can see the difference in the code but, I don’t know what those differences mean.
I was trying to figure it out when I found your code. It’s cleaner, simpler and it works perfectly. However, the test gave me 9/10.
Can you help me understand the difference? Or, can you point me somewhere where I can figure this out?
Any help is appreciated
My codepen: https://codepen.io/ej-salga/pen/zYvbodX