Can I Change The Size Of An Image? - Codecademy

Skip to Content

This forum is now read-only. Please use our new forums! Go to forums

bannerClose banner0 pointsSubmitted by bluesmonkryanover 10 yearsCan I change the size of an image?

Using the command,am I able to change the size of an image? If so what is the command prompt? (also is command and command prompt, the correct verbage?)

Answer 5295063f548c3512af0001f1

0 votes

Permalink

There is no command for changing an image size. Image dimensions are ‘properties’ which can be expressed in either the HTML <img> element, as width="150" height="100" attributes in the tag; or, the CSS as style rules applying to specific images.

Eg. Say you have an image file with dimensions 400px by 300px. We tell the browser,

<img src="images/myimage.png" width="400" height="300" alt="">

If we wish to scale the image, then we use width OR height, and let the other fall in.

<img src="images/myimage.png" width="50%" alt="">

This will scale the image to 200px by 150px. The percentage is arbitrary. Most designers would prefer we work with exact sizes for our layouts so the browser doesn’t introduce distortion. It is also much quicker for the page to load if it doesn’t have to do a lot of calculations for images. This will hold up everything.

Now we could also set the size in the style sheet. This,

<img src="images/myimage.png" width="400" height="300" alt="">

becomes,

<img src="images/myimage.png" id="myimage" alt="">

CSS

#myimage { width: 400px; height: 300px; }

If you have a lot of images with the same dimensions, then switch to a class:

<img src="images/myimage.png" class="myimages" alt="">

CSS

.myimages { width: 400px; height: 300px; }

Now you free up a tonne of otherwise cluttering attributes with this one simple rule.

Hope this was helpful.

pointsSubmitted by Royover 10 years

1 comments

bluesmonkryan over 10 years

Thank you Roy.

Popular free courses

• Free Course

  Learn SQL

  Beginner friendly,4 Lessons In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Language Fluency
• Free Course

  Learn JavaScript

  Beginner friendly,11 Lessons Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Language Fluency
• Free Course

  Learn HTML

  Beginner friendly,6 Lessons Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Language Fluency

Explore full catalog