0

I am currently taking a class, and we were told to use little to no in-line styling in our code. Is it possible to re-size an image in a similar way using an external CSS file?

<img src="image link" style="height: 200px; width: 200px;">

Klors
  • 2,665
  • 2
  • 25
  • 42
Shreyans Patel
  • 51
  • 1
  • 7
  • you can use % to resize an image – Keith Nov 03 '15 at 16:05
  • You should also just use the `width` and `height` attribute of the `img` tag. That's not inline CSS, it's an HTML construct. I also believe that it's recommended for accessibility reasons. See http://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html – Mike G Nov 03 '15 at 16:08
  • @mikeTheLiar Well it's inline styling (perhaps not CSS) but it's the same thing. – Paulie_D Nov 03 '15 at 16:14
  • The question is too vague... you mentioned an external CSS file which indicates you know about them...so why not use one? – Paulie_D Nov 03 '15 at 16:16
  • @Paulie_D I'll give you that (a question of semantics at best), but be that as it may if the professor is telling his class to use CSS classes instead of HTML attributes because "inline styling is bad mmmkay" then they are wrong. Height and width attributes have distinct, concrete, important meanings beyond "display the image at this size". – Mike G Nov 03 '15 at 16:39

1 Answers1

1

This can be done in an external stylesheet like so:

img {
    height:200px;
    width:200px;
}

I would suggest only specifying the height or the width, when you do that, the other dimension is automatically sized proportionally. You will also want to add a class to the image so that you can make the CSS selector more specific so that it doesn't target all images on your page.

APAD1
  • 13,509
  • 8
  • 43
  • 72