To make an image responsive in HTML, you can use CSS to define the maximum width of the image and set its height to auto. This will allow the image to adjust its size proportionally based on the size of the device or screen it is being viewed on.
Here’s an example of how you can make an image responsive in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="your-image.jpg" alt="Your Image">
</body>
</html>
In the above example, the CSS code sets the maximum width of the image to 100% and the height to auto, which ensures that the image will resize itself to fit the container it is in. The HTML code includes the image element with the source file and alt text attributes.
You can also use media queries to apply different styling to the image based on the size of the device or screen it is being viewed on. This allows you to optimize the image for different screen sizes and provide the best viewing experience for your users.