Intro to HTML: Changing an Element's Size

Quick Copy Boxes

You will often want to change the size of elements such as pictures and videos. This is often done by specifing the width and/or height of an element. To change the size of text visit: Font Styling.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Images

You can change the size of images using the height and width attributes. It is common to only set the width of a picture. If you set both the height and width, your image will probably not stay true to it's orginal scale.


Image Width

             
<img width = "300" src = "image.jpg">
            

width The image will have a width of 300 px.
src The location of the picture(File or Web address). In this example, the picture is image.jpg.
✶ If you aren't sure how to write the file location, visit: links

Image Height

              
 <img height = "300" src = "image.jpg">
             

height The image will have a height of 300 px.
src The location of the picture(File or Web address). In this example, the picture is image.jpg.
✶ If you aren't sure how to write the file location, visit: links

Image Height & Width

                
<img width = "300"  height = "300" src = "image.jpg">

               

width The image will have a width of 300 px.
height The image will have a height of 300 px.
src The image is located at image.jpg
✶ The image will probably change scale.


iframe

An iframe is used to display an html file inside an html file. They are often used to to display content such as YouTube videos or advertisments. You will probably want to size the content.


iframe with Video

   
<iframe src="https://www.youtube.com/embed/5lxNtFfFxE8"  width = "500" height = "400"></iframe>

               

src This is the location of the video. In this example it is a YouTube video embed link.
width The width is set to 500px
height The height is set to 400px.
✶ Unlike images, iframes use a border to keep the video to scale.✶

Next, run the code below. Play around with the width, height and src attributes.