A few days ago, while I was practicing my html and css skills, I found a small problem in my tribute page project . The image didn’t resize to the viewport. Please tell how I can solve this problem, thank you.
Can you share a link to your project and describe what you’ve tried so far and what problems you’ve run into?
Hi @Mikael3211,
You have many possibilities. You can decide to give your image a relative size, or you can keep the fixed size and then with the media query apply a relative size to your image. Your image is not resizing just because you just applied it a fixed size:
#imgage {
max-width:none;
width:300px;
}
After, if you mean just that the image didn’t resize with your CSS property, the id you try to reach is wrongly spelled.
CSS: #imgage
HTML: id="image"
I am confused. Please tell me how I can fix these two problems.
I already told you the answer kind of way. If your issue is because your image didn’t resize it is because of your spelling.
Your HTML:
<!-- the id of your img tag is: image -->
<img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaAke6TKvUHj7HRHEitKi93iwyxFjXBSzUFmPN-PRk58FED2uTOUwkG9o&s=10">
Your CSS:
/* The id your are targeting is: imgage. Different then than your HTML id */
#imgage {
max-width:none;
width:300px;
}
Now, if you want that the image be responsive, then reduce its size according to the size page, you have to use a different type of units for your image such as %
for example. Or you can decide to keep the px
unit and apply a rule to your media query. Let’s use your code:
#imgage {
max-width:none;
width:300px;
}
@media(max-width:400px) {
#imgage {
width: 150px;
/* or */
width: 75%;
}
}
I gave you examples, you can use whatever you want. If you don’t understand the difference between fixed and relative values, maybe watch again the courses about it.