Export (0) Print
Expand All

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.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 Cc295185.495e2c3a-319d-438b-afab-cc000cd31c9d(en-us,Expression.10).bmp on the Pictures toolbar or the Picture Actions button 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

  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.

    Cc295185.alert_tip(en-us,Expression.10).gifTip:

    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.51e07df4-5b7e-4c9f-8607-0a17205adafd(en-us,Expression.10).gif 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 the Resample button Cc295185.495e2c3a-319d-438b-afab-cc000cd31c9d(en-us,Expression.10).bmp.

    • Near the lower-right corner of the graphic, click the Picture Actions button Cc295185.f31f1fb1-d33f-4d0e-aaa5-cb90a676c07b(en-us,Expression.10).gif and click Resample Picture to Match Size.

    Cc295185.alert_note(en-us,Expression.10).gifNote:

    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 the Resample button Cc295185.495e2c3a-319d-438b-afab-cc000cd31c9d(en-us,Expression.10).bmp.

    • Near the lower-right corner of the graphic, click the Picture Actions button Cc295185.f31f1fb1-d33f-4d0e-aaa5-cb90a676c07b(en-us,Expression.10).gif and then click Resample Picture to Match Size.

Cc295185.alert_note(en-us,Expression.10).gifNote:

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.

Community Additions

ADD
Show:
© 2014 Microsoft