<< .. Go to : : Home : : Ex 3 : : Demo 3A : : Demo 3B : : Demo 3C : : Demo 3D : : Demo 3E : : Demo 3F : : Demo 3G : : All Class Demos .. >>

Exercise 3 Demo: Part G : Responsive Images

CSS styles make images scalable

Adding CSS styles to Make Images Responsive

Responsive Design use is becoming more important in web development. Adding a little bit of CSS styles can make your images scale up or down as the browser window size is adjusted.

We can use the width style of 100%, and then the image is scalable up and down. This is not always ideal. The best solution might be to add the max-width: 100%; to style the image.

Add this to your Document Styles in the head of your page.

<style>
img { max-width: 100%; height: auto; }
<style>

Try resizing the browser window to see what this image does.

cloud image

The code for my image contains all the regular attributes:
<img src="images/clouds2.jpg" alt="cloud image" width="800" height="289">