When you add an img to a page, you normally enter the width height of the image to your HTML markup. If you want your image to be responsive, you’re not supposed to do that anymore.
As mentioned before, you need to forget about the height and width of the image you’re using and so your HTML code would look like the following:
<img src=”image-source” alt=”image-alt-text”>
Next step in CSS:
With the CSS rules defined for the image, the image will scale up and down always matching your viewport proportionally.
The following line of code is an HTML link element that contains a media query:
<link href=”stylesheet.css” rel=”stylesheet” media=”screen and (min-width:320px)”>
The part that says media=…. is the media query used in this link element. It’s used to define under which circumstances or conditions the browser should use this style sheet.
This media query tells the browser to use the style sheet when the media type is screen, i.e., the HTML code is being rendered on a screen like an LCD display and also if the “viewport” width is greater than or equal to 320px.
Media queries are very often used in responsive web design theses days. Responsive web design is another name for the sum of all the activities and technologies that web designers do or use so that their websites are displayed the way they wanted them to be displayed on all or most screen sizes or screen types, media queries being one of them. Devices range from smart phones like iPhone, Android, etc. going all the way to huge Internet-enabled TVs. So it’s pretty complicated.
Media queries work in all the modern browsers and in IE9+. IE8 doesn’t understand them and simply ignores them. So if you’re designing for IE8 as well, you need to have some strategy so that your content is accessible there too.