Sometimes an image won’t be the right size for your webpage. In this video, learn how to resize it to the dimensions you want.
- [Instructor] Sometimes an image won't be…the size you'd like.…Here's a webpage that shows a picture of cherry blossoms,…but I'd like the image to be a bit smaller.…I can change its display size by using the width…and height attributes on the image element.…First, I need to find out how big the image is right now.…I can do that by right-clicking and looking…at the image info.…This image is 533 pixels wide and 400 pixels high.…So let's say I wanted to display as 300 pixels high instead.…
I can go into the editor and add the height attribute…to the image element by saying height equals 300.…Just put the number as the attribute value.…Don't use PX, that's for style sheets.…When you save and reload in the browser,…you'll see that the image is now smaller.…I didn't have to specify the width.…The browser made sure that the picture stayed in proportion.…However, it's always a good idea to specify…both the width and height.…
This lets the browser figure out how much space…the image will need, and it will pre-allocate it…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.