getSizesAttribute() — astro Function Reference

Architecture documentation for the getSizesAttribute() function in layout.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ getSizesAttribute() — astro Function Reference

Dependency Diagram

graph TD
  ad1e11d5_d618_330e_f9c0_798019c795f5["getSizesAttribute()"]
  2f6ec35e_f910_f4f1_2246_f872e6b9468b["layout.ts"]
  ad1e11d5_d618_330e_f9c0_798019c795f5 -->|defined in| 2f6ec35e_f910_f4f1_2246_f872e6b9468b
  style ad1e11d5_d618_330e_f9c0_798019c795f5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/layout.ts lines 93–121

export const getSizesAttribute = ({
	width,
	layout,
}: {
	width?: number;
	layout?: ImageLayout;
}): string | undefined => {
	if (!width || !layout) {
		return undefined;
	}
	switch (layout) {
		// If screen is wider than the max size then image width is the max size,
		// otherwise it's the width of the screen
		case 'constrained':
			return `(min-width: ${width}px) ${width}px, 100vw`;

		// Image is always the same width, whatever the size of the screen
		case 'fixed':
			return `${width}px`;

		// Image is always the width of the screen
		case 'full-width':
			return `100vw`;

		case 'none':
		default:
			return undefined;
	}
};