HTML IMAGE


Use img to bring an image into the web page

<img>

Attribute: src, width, height

<img src="stella_photo.jpg">


Controlling the exact size

Add width="number" and height="number"

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


EXAMPLE CODE - HTML IMAGE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML IMAGE</title>
</head>
<body>

<h3>Simple Image</h3>
<img src="duck_photo.jpg" width="300" height="300" >

</body>
</html>

Copy above code & try it into your natepad


Browser view of the code:

Html Image


Controlling size with correct ratio

Use only one of width or height

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


Contrilling the relative size

Add width="number%" and height="number%"

<img src="stella_photo.jpg" width="50%">

The percentage value is relative to the thing which contains the image, which we call the parent.




Copyright © 2020. All rights reserved.