Adjust Image Responsive to Screen Size

Make images dynamically resize with a changing screen size.

<img style="width:40%;" src="">


The image needs to be in a container. The container size needs to be set. The image size needs to be set as a percent of the container.

1. Define the container size. In the example below the container is a div with min-width of 100px
2. To the image attribute add style="width:40%;" (or whatever percent you want).

Produces this result: Resize the grip on the container below to see the image resize with the container, staying at 50% of the changing container's size.

This is an example of how an image can be dynamically resized to be a percent of the container it is in. The container can be the whole screen of the browser, or be a div or any other HTML element. The container must be sized, for example min-width:100px, or by a percent like width:90%. The image is set to a percent using style="width:40%;" or whatever percent you want it to be---but it must be a percent in order to resize dynamically with the size of the container. Resize the container below to see the effect.


Copyright © Website Development | Disclaimer | Privacy Policy | Terms of Use