Set the size of a picture
When you add a picture to a page, Microsoft Expression Web automatically sets width and height properties for the picture based on the actual dimensions of the picture. You can use the Page Editor Options dialog box to specify whether Expression Web uses HTML attributes or cascading style sheets (CSS) to set the picture size.
You can quickly add or remove the width, height, or both properties from a picture by double-clicking a resize handle .gif "Cc295185.51e07df4-5b7e-4c9f-8607-0a17205adafd(en-us,Expression.10).gif")
on the picture. You can resize a picture by dragging a resize handle or by specifying values. When you use either method, the picture is resized by changing the width and height properties. If you want to resample a resized picture instead, you can use the Resample button .bmp "Cc295185.495e2c3a-319d-438b-afab-cc000cd31c9d(en-us,Expression.10).bmp")
on the Pictures toolbar or the Picture Actions button .gif "Cc295185.f31f1fb1-d33f-4d0e-aaa5-cb90a676c07b(en-us,Expression.10).gif")
, which appears near the picture in Design view.
To set the code Expression Web uses to set picture dimensions
On the Tools menu, click Page Editor Options.
In the Page Editor Options dialog box, on the CSS tab, select or clear Use width and height attributes for images instead of CSS.
Tip
If you set Expression Web to use CSS to define the width and height of pictures, you can set the type of style that Expression Web uses by setting the Sizing, positioning, and floating option in the Page Editor Options dialog box. For more information, see Set preferences for generated CSS.
To add or remove width and height properties
In Design view, in your web page, click the picture.
Do one or more of the following:
To add or remove only the width property, double-click the resize handle on the right side of the item.
To add or remove only the height property, double-click the resize handle on the bottom of the item.
To add or remove the width and height properties, double-click the resize handle on the lower right corner of the item.
For more information, see Set margins, padding, and dimensions in Design view.
To resize a picture by dragging
In Design view, in your web page, click the picture, and then, on the right side, bottom side, or bottom right corner of the picture, drag a handle
to a new position.If you want to resample the picture according to its new size, do one of the following:
On the Pictures toolbar, click the Resample button
.Near the lower-right corner of the graphic, click the Picture Actions button
and click Resample Picture to Match Size.
Note
To save the edited picture, on the File menu, click Save to save the page. In the Save Embedded Files dialog box, set the options you want, and click OK. For more information, see Save an embedded picture.
To resize a picture by specifying pixel or percent values
In your web page, do one of the following:
In Design view only, double-click the picture.
Click the picture you want to set, and then on the Format menu, click Properties.
Right-click the picture, and, in Design view, click Picture Properties, or in Code view click Tag Properties.
In the Picture Properties dialog box, on the Appearance tab, do the following:
Use this
To do this
Specify size
Select the check box.
Keep aspect ratio
Select to maintain the original proportions of the image.
Width
Specify the size and unit you want.
If you want to resample the picture according to its new size, do one of the following:
On the Pictures toolbar, click the Resample button
.Near the lower-right corner of the graphic, click the Picture Actions button
and then click Resample Picture to Match Size.
Note
To save the edited picture, on the File menu, click Save to save the page. In the Save Embedded Files dialog box, set the options you want, and click OK. For more information, see Save an embedded picture.