Image Resize in Dreamweaver

    ●   Add a Resize Class to your images to make them responsive.

Learn About:


  •   This tutorial is part of the What in the World? - Fan-Tastic, and Art Genre Projects.

  •   It is part of a series: 42_float_Dw.htm, 174_img_padding_Dw.htm, 66_img_border_Dw.htm, and 180_img_resize_Dw.htm


Step #1: Open your Project in Dreamweaver ~

Open your page in Dreamweaver – or any page with a picture:

… look between the <head></head> tags in Split view …

… and clear some space to work in.

Step #2: CSS Style ~

Copy the following code and paste it between the <head> </head> tags …

<style type="text/css">


… like this.




You may already have this code - if so - you don't need to repeat it.



You can add your new code inside the existing CSS codes.


Step #3: Add the code ~

Add the following code between the<style type="text/css"> </style> tags:

Step #3: Max-Height ~

Set your max-height:

Step #4: Max-Width ~

Set your max-width:

Step #5: Add the Class to the Images ~

Find and select the image you want to apply the new class too.

Step #6: In-Line CSS ~

Find the code for the images in Split view …

… and add the class to the image:

Step #7: So What?

Now your images will shrink to fit the window!

Put this code on all your pages!

Last Step: Save and Upload your site ~

Upload your site with the work you completed, attach the link to your site where the work is located …

… and continue working …