Resizable Images in HTML and CSS

How to make Resizable images with HTML and CSS.

753 views

By. Jacob

Edited: 2019-10-13 06:06

Creating images that are resizable, also known as responsive, is very easy using CSS Media Queries.

However, to make the images truly resizable you should consider making them in the .svg format. This is not always possible, however. Photos are complex images, and are still best served in the WebP or JPG formats.

The CSS to make images responsive for small screen resolutions would look like this:

@media screen and (max-width:500px) {
  .main_content img {
    width:90%;
    min-width: 300px
    display:block;
    margin:0 auto;
  }
}

This media query will only come into effect when the browser window is narrower than 500px, and it also works on mobile devices.

The display:block; and margin:0 auto; attempts to center the image by turning it into a block element, and setting margin-left and margin-right to auto. Centered often looks better on mobile.

For maximum compatibility, when making responsive designs, you should also include the following in your HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1">

This, initial-scale=1, makes sure that the browser on mobile devices will not "zoom" in/out on your page, and allows content to flow naturally.