--- title: "How can you make an image adjust its size based on the screen width?" description: "How can you make an image adjust its size based on the screen width?" author: "Revati S Misra" published: 2023-06-07 updated: 2023-06-09 canonical: https://www.mindstick.com/forum/158674/how-can-you-make-an-image-adjust-its-size-based-on-the-screen-width category: "css-css3" tags: ["responsive design", "css", "css position"] reading_time: 1 minute --- # How can you make an image adjust its size based on the screen width? How can you make an [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) [adjust its size](https://www.mindstick.com/forum/158657/how-can-you-make-an-image-responsive-and-adjust-its-size-based-on-the-screen-size-using-css) based on the [screen](https://www.mindstick.com/forum/33644/loading-screen-during-ajax-call) width? ## Replies ### Reply by Aryan Kumar To make an image adjust its [size](https://www.mindstick.com/forum/159799/how-can-you-manage-the-size-of-mdf-and-ldf-files) based on the screen width, you can use CSS (Cascading Style Sheets) and the `max-width` property. Here's a general approach: 1. Add an HTML `` tag to your webpage with the desired image source: ```plaintext ```html Image description

``` ``` 2. Apply CSS to the `` tag to make it responsive. Use the `max-width` property and set its value to `100%`: ```plaintext ```html ``` ``` By setting `max-width: 100%`, the image will automatically adjust its size to fit within its parent container or the screen width, whichever is smaller. The `height: auto` ensures that the image's aspect ratio is maintained, preventing distortion. Remember to place the CSS code either within the `` section of your HTML file or in an external CSS file and link it to your HTML. With this approach, the image will dynamically resize based on the screen width, providing a responsive experience for different devices and screen sizes. --- Original Source: https://www.mindstick.com/forum/158674/how-can-you-make-an-image-adjust-its-size-based-on-the-screen-width Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.