Design comparison
Solution retrospective
I've a few problem with image ... I don't know why. She does not take the size of her parent. If you can help me, it's with plasure !
Sorry my english isn't very good ^^
Community feedback
- @fruizoteroPosted about 2 years ago
The problem is that you have the "with" property set to "auto", declared in an inline style.
<img src="./images/image-header-header-desktop.jpg" alt="header img" style="/*! width:auto; */">
You should remove it and give it a width of 100% in your stylesheet and it should fix the problem. Also I would advise you not to give inline styles unless you are working directly with javascript or frameworks, in this case for example if you don't remove the inline style and apply the width:100% in the stylesheet, the latter will be ignored because of the specificity.
Marked as helpful0@Elis0uPosted about 2 years ago@fruizotero Oh ! Nice, I didn't notice that ! Thank's you so much. But I've other question. When I put other resolution, for exemple width : 1000px on my navigator, the image don't keep the height of her parent : https://i.imgur.com/RYYtfy0.png
0@fruizoteroPosted about 2 years ago@Elis0u That's basically because of the height you have defined for the picture, you give it a height of 100% but at no time have you defined a fixed height in any of its parent elements, unless you set a fixed height, that's when you will see that it really occupies 100%, in this case it's better to change auto so that it adapts.
`` .card .card-img {
width: 50%; height: 100%; (change to auto) background-color: var(--softViolet); border-radius: 0 0.7rem 0.7rem 0.7rem 0;
} ``
Another thing you'll see with this is that certain parts of your image are hidden when the screen resolution is made smaller, you can simply change the
``.card .card-img img{
object-fit:fill;
} `` PD: Si hablas español, pregunta sin problema.
Marked as helpful0@Elis0uPosted about 2 years ago@fruizotero Thank's you so mutch ! I was able to solve my problem thanks to you. I'm French, sorry. I don't speak spanish ^^ Thank's you again
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord