Understanding Image Dimensions

Controlling the dimensions of images allows you to ensure that they fit well within your web page's design. By specifying the width and height attributes, you can adjust the size of an image to match your layout requirements.

Syntax of width and height Attributes

The width and height attributes are used within the <img> tag to define the size of an image. These attributes can accept values in pixels (px) or percentages (%).

<img src="imageURL" alt="description" width="value" height="value" />

• width="value": Sets the width of the image. The value can be in pixels (e.g., width="300") or percentage (e.g., width="50%").
• height="value": Sets the height of the image. Similar to width, the value can be in pixels or percentage.

Note: When using percentages, the image size will adjust relative to its parent container, making it responsive to different screen sizes.

Examples of Setting Image Dimensions

Let's explore two practical examples of setting image dimensions using the width and height attributes.

1. Basic Example: Fixed Dimensions

In this example, we'll set fixed dimensions for an image using pixel values. This method is straightforward and ensures that the image appears at the specified size regardless of the screen size.

Explanation:

• The <img> tag embeds the TechGrind.io logo.
• width="300" sets the image width to 300 pixels.
• height="150" sets the image height to 150 pixels.
• The image will consistently display at 300x150 pixels on all devices.

2. Responsive Image Example: Percentage-Based Dimensions

Creating responsive images ensures that they adapt to different screen sizes, enhancing the user experience on various devices. By using percentage values for the width attribute, the image scales relative to its parent container.

Explanation:

• The <img> tag embeds a banner image from TechGrind.io.
• width="100%" sets the image width to 100% of its parent container's width.
• The image automatically adjusts its size based on the viewport, ensuring it looks good on both desktop and mobile devices.

Understanding how to control image dimensions is crucial for creating visually appealing and user-friendly websites. Properly sized images enhance the overall layout and ensure that your content looks great on all devices. In the next lesson, we'll explore the <img> tag in more detail by focusing on the alt attribute and its importance.