Summary:

Image Resize in Dreamweaver

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


Learn About:

max-heightmin-height

  •   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">


</style>

… 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 …