Images will expand to the width of the section containing the web part. Here is an example of an image shown in the Filmstrip layout (top) and Cards layout (bottom). Here is an example of an image shown in the Layers layout (top) and Tiles layout (bottom)ġ6:9 is the aspect ratio for Carousel, Filmstrip, and Cards layouts. On mobile devices, a carousel layout is used at 16:9. Layers: An individual layer scales to an aspect ratio of 8:3, and images inside each layer scale to an aspect ratio near 16:9. Tiles: the height of the web part is scaled to follow an aspect ratio of 8:3, and images inside the web part scale to an aspect ratio of 4:3. The following aspect ratios for Tiles and Layers layouts are:
The following examples show different web parts and their layouts within one column, and the aspect ratios that are used in each.Ĭonsider this image which has an original aspect ratio of 16:9:įollowing are examples of this image shown in a one column page layout, in different web parts and layouts. The layouts in the web parts you use will also affect how your images scale. This is helpful to keep your images at a width and height that scales appropriately for mobile devices, for example.ģ80 x 446 for left column 792 x 446 for right columnģ80 x 594 for left column 792 x 594 for right columnħ92 x 446 for left column 380 x 446 for right columnħ92 x 594 for left column 380 x 594 for right column Here are height/width guidelines for 16:9 and 4:3 aspect ratios (rounded up/down to the nearest pixel). The height of images placed within other column layouts will depend on your aspect ratio. Following are the width guidelines for each of the column layouts:ģ80 for left column 792 for right columnħ92 for left column 380 for right columnīecause of the responsive nature of pages, images in full-width columns will always display at full-width of your screen with an automatic height based on screen size. For example, an image in an image web part in one column should be at least 1204 pixels wide.
A general rule for images expected to fill the width of a column is that they be at least as wide as the column in which they are placed. Column layoutsĪ page can be laid out with sections that include different column types and layouts, such as full-width columns, one column, two columns, three columns, one-third left and one-third right columns. In most cases, images in modern web parts work best across layouts and devices when they have an aspect ratio of either 16:9 or 4:3, depending on the layout. You can find aspect ratio calculators online and in some photo editing tools to help you determine the aspect ratios of your images. Or, it could be 1920 x 1080, 1280 x 720, or any other width/height combinations that can be calculated to equal 16:9. As an example, a ratio of 16:9 could be 1600 pixels in width by 900 pixels in height. It is usually expressed as two numbers, such as 3:2, 4:3 or 16:9. Web part layout: the layout you choose for the web part in which the image is being usedĪn aspect ratio is the relationship between width and height of images. However, there are some guidelines that can help you make sure your images look great on your pages.įinding the best image sizes for your page depends on these factors:Īspect ratio: the relationship between height and width of imagesĬolumn layout: the type and number of columns on your page Images are resized and cropped automatically to show the best possible result across a variety of devices and layouts. For example, modern pages are designed to look great on mobile devices, and automatic image scaling helps create that attractive experience.īecause of the responsive page design, there is not a specific height or width in pixels that will ensure that an image will maintain a specific shape across devices and layouts. Modern pages and web parts are designed to be fully responsive across devices, meaning that images used in web parts will scale differently depending on where they are shown, which layout is used, and the device on which they are being viewed.
0 kommentar(er)
