Make image responsive in wordpress?

Question

How do I make images automatically resize themselves depending on the screen size?

I add a css attribute for an image such as

 img {
 width: 100%;
 height: auto;
 }

but that will make a small image take the form of the container it is in and if the container is huge, the small image will stretch out and pixelate. So do I just create special css attribute for the large images? I don't want the images to fill up the container or div that they are in. I just want them to resize based on the screen size. Tables should also resize as well. I'm using both divs and tables.

Use img's css with media queries. read more for media query here http://www.w3schools.com/cssref/css3_pr_mediaquery.asp — Leo the lion, Mar 23 '16 at 05:45

score 1 · Answer 1 · answered Mar 23 '16 at 05:45

Insert the image normally;

In "Size" select "Custom";

Set the "Width" and "Height" to "0";

Insert this in your CSS code:

img {
     border: 0 none;
     max-width: 100%;
     vertical-align: middle;
}

Please Refer This page Using Media Queries with Custom CSS

Make image responsive in wordpress?

1 Answers1