How to change image size in CSS

To change the image size in CSS, you can use the width and height properties. These properties allow you to adjust the dimensions of an image element within your HTML document.

Here’s an example of how to change the image size:

HTML:

<img class="custom-image" src="path/to/image.jpg" alt="Custom Image">

CSS:

.custom-image {
  width: 300px; /* Replace with your desired width */
  height: 200px; /* Replace with your desired height */
}

In this example, we have an image element with the class “custom-image.” We target this element in CSS using the class selector .custom-image and use the width and height properties to set the image dimensions to 300 pixels in width and 200 pixels in height.

Keep in mind that changing the width and height properties directly may distort the image’s aspect ratio if the values are not proportional. If you want to preserve the aspect ratio while changing the size, you can set either the width or the height, and the other dimension will adjust automatically. For example:

.custom-image {
  width: 300px; /* Width is set, height will adjust proportionally */
}

Or:

.custom-image {
  height: 200px; /* Height is set, width will adjust proportionally */
}

If you want to make an image responsive and automatically adjust its size based on the screen width, you can use percentage values for the width property or use the max-width property to limit the image’s size. For example:

.custom-image {
  width: 100%; /* Image will scale to fit its parent container */
}

/* Or */

.custom-image {
  max-width: 100%; /* Image will scale down to fit its parent container, but not exceed its original size */
}

Adjust the width, height, or max-width properties according to your design requirements to control the size and responsiveness of the images on your website.