Tribute page: how to resize image using CSS?

HTML-CSS
1

I have input an image using html and initially I managed to resize it to the size I want by adding:
style= “width:100%”
into the image code on html.

However, I have now realised that any resizing should be done on the style.css box instead of the index.html box, meaning that I can not just add it to the end of my html code.

This is my html code without the style=“width:100%” added onto it:

<div id="img-div">
<figure>
<img id="image" src="https://d1l18ops95qbzp.cloudfront.net/wp-content/2016/09/Vani-Hari-Grocery-Store-Credit-Kwaku-Alston.jpeg" alt="Picture of The food Babe smiling whilst standing in the middle of a shopping aisle with her arms crossed.">
<figcaption id="img-caption">Vani Hari, known as "The Food Babe" is a New York Times best selling author and activist who passionatley changed dozens of multi-billion dollar food corporations, impacting the lives of millions of people.</figcaption>
</figure>
</div>

Now that I removed the style=“width:100%” from the html code, I’m not sure how to edit the size on css… my html code has:

  • an id of image
  • a div id of img-div
  • figure element
  • figcaption
  • figcaption id of img-caption

Any help please on how to resize the image in the css box? on the css course it mentions resizing using class so do i need to create a class (and if so, do i create the class on html box then style the class on css box) - it’s just a bit confusing when the tutorials are all done on one box but the tribute page has to be done on 2 sepearate boxes (for html and css)

Thanks!

2

Assuming your pictures id is id="image" you can resize it in CSS like so:

#image {
  width: 100%;
}

You can also just select the image tag and resize that like so:

img {
  width: 100%;
}

If the image is within a div element then you can resize the div container by selecting it like so:

#img-div {
  width: 100%;
}
1 Like
3

i don’t know why these options aren’t working?! :thinking: i’ve tried them all within the css box but the image size remains the same (too large)

it only chnages size when i add style=“width:100%” at the end of my html code for my image (which i don’t want to do as i need to put it in the style.css box not the index.html box)

4

Instead of 100% try 100vw. The vw stands for view width. That should prevent it from being larger than the viewport width. It acts as a 100% of the viewport width.

5

still has no effect whatsoever on the image :frowning:
is it possibly because the only thing written in my style.css box is:

#image {
width: 100vw;
}

do i need to add anything else before it??? my input.html box has lots of code in it on the other hand, including code for the image which has the id of image.
i even tried creating a class for my image on the html code and using the class to style the image in the css box but still no change! it feels like the css box is not reading anything from the html box? :confounded:

6

okay i think i might have found the root of the problem… i learned html/css using the original course which didn’t explain about links (everything was all done in one box), but the new course separates it into a html and css box and talks about creating a link,
so i think i need to do the new course to learn how to link the two boxes together…

Yes i figured out the solution now! I needed to link the 2 boxes together and i learned this in the new course :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.