Exercise 3 Demo: Part G : Responsive Images
CSS styles make images scalable
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.
The code for my image contains all the regular attributes:
<img src="images/clouds2.jpg" alt="cloud image" width="800" height="289">