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 Cc295185.ff1b74d1-90c7-4146-90e5-c8784f5e6b7c(en-us,Expression.40).png 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 Resample Cc295185.183ffc09-94d8-4aa9-b60f-842af7f33b96(en-us,Expression.40).png on the Pictures toolbar or Picture Actions Cc295185.1d403f9f-5161-4a64-929f-7f04cb9232de(en-us,Expression.40).png, which appears near the picture in Design view.

To set the code Expression Web uses to set picture dimensions

  1. On the Tools menu, click Page Editor Options.

  2. 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

  1. In Design view, in your web page, click the picture.

  2. 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

  1. 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 Cc295185.ff1b74d1-90c7-4146-90e5-c8784f5e6b7c(en-us,Expression.40).png to a new position.

  2. If you want to resample the picture according to its new size, do one of the following:

    • On the Pictures toolbar, click Resample Cc295185.183ffc09-94d8-4aa9-b60f-842af7f33b96(en-us,Expression.40).png.

    • Near the lower-right corner of the graphic, click Picture Actions Cc295185.1d403f9f-5161-4a64-929f-7f04cb9232de(en-us,Expression.40).png 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

  1. 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.

  2. 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.

  3. If you want to resample the picture according to its new size, do one of the following:

    • On the Pictures toolbar, click Resample Cc295185.183ffc09-94d8-4aa9-b60f-842af7f33b96(en-us,Expression.40).png.

    • Near the lower-right corner of the graphic, click Picture Actions Cc295185.1d403f9f-5161-4a64-929f-7f04cb9232de(en-us,Expression.40).png 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.

See also

Tasks

Crop a picture
Set margins, padding, and dimensions in Design view
Save an embedded picture

Concepts

Picture properties

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.