@fruizotero
Posted
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 helpful
@Elis0u
Posted
@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
@fruizotero
Posted
@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 helpful
@Elis0u
Posted
@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
