Can I Change The Size Of An Image? - Codecademy

Skip to ContentSubmitted by bluesmonkryanabout 12 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.

Submitted by mtfabout 12 years

1 comments

Submitted by bluesmonkryanabout 12 years

Thank you Roy.

Popular free courses

• Free course

  Learn SQL

  In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.
  • Checker DenseBeginner Friendly.Beginner Friendly4 Lessons4 Lessons
  
• Free course

  Learn JavaScript

  Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
  • Checker DenseBeginner Friendly.Beginner Friendly11 Lessons11 Lessons
  
• Free course

  Learn HTML

  Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
  • Checker DenseBeginner Friendly.Beginner Friendly6 Lessons6 Lessons
  

Explore full catalog