How to resize external images with HTML and CSS

How to resize external images with HTML and CSS
0

#1

What classes or attributes or whatever i can use to resize a external image? im starting to build the tribute page


#2
.a-class-for-my-image {
  width: /* width here */;
  height: /* height here */;
}

Note if you set width and height, you’ll get a squashed/stretched image. Much better is to make sure all your images are the same size to start with, then just set a width.


#3

i need to do that inside style right? is it ok to do the style under the code? or coz html read from top to bottom i need to set the style first?


#4

You want the CSS to be the first thing that is read by the browser, and the browser does read top-to-bottom, but CSS can be put anywhere - the reason you put it at the top is so that it loads first (it will still load wherever you put it though, but there might be flashes of unstyled elements as the page loads). So you would put it in either a <style> tag at the top of the page, or a link to an external CSS file.

If you’re using CodePen, just put it in the CSS box, otherwise, yup, style at the top of the HTML.


#5

Cheers buddy, the thing is the exercise on freecodecamp of the tribute page asks not to use CSS and just html so i think i will need the style thing


#6

Where does it say that? You can use plain CSS or an external CSS library (such as Bootstrap) to complete your projects.