Using Images
Using the img Tag
The bread and butter of any good site. The image. Basic usage is as follows:
Wow. Isn't that beautiful?
This is the code I used to get this lil guy here.
<img src="/assets/html/apple-car.jpg" width="300" />
Notice the width attribute. It's set to 300, as in pixels . Pixels are the basic unit of the web. Everything is measured in pixels at the end of the day! I set this picture to be 300 pixels wide with this attribute, and it automatically scales, which is nice.
Here's what it would look like if I didn't include that width attribute.
He's pretty dang big. That's because the native resolution (actual width and height size of the image file) is 817 x 850 pixels. I made it a bit smaller using that attribute.
Now, if I add a
height
attribute along with the width, it will warp him and make him squished. If you want to maintain the proportions
(called the
aspect ratio
) only include one of these attributes.