An image resource can carry a natural aspect ratio while CSS chooses a preferred aspect ratio for sizing. Those ratios often agree, which is why a fallback, an explicit override or a constraint can be surprising.
This guide follows natural dimensions, auto plus ratio, HTML hints, transferred sizes, min/max constraints and object fitting through a complete replaced-element example.
The worked records are original teaching examples. Each keeps the observed value, reference condition, derived result and decision in separate fields so the reader can see where a conclusion begins and where it stops.
A changed-context check alters one consequential condition while leaving the other inputs fixed. This makes transfer visible and prevents the original numerical answer from becoming a rule without a scope.
Keep a compact evidence receipt: object, method, units, reference, conditions, transformation, result and nearest rival explanation. A future reader should be able to reproduce the narrow claim from that receipt.
The five reading routes move from definitions to mechanism, evidence, transfer and reporting. Readers may enter by task, but the examples remain connected so the explanation never becomes a list of detached tips.
The practical standard is an answer that can be checked. Preserve raw inputs, intermediate calculations, exclusions and versioned sources; then state one stronger claim that the evidence still cannot support.
Before choosing a formula or property, name the reader job in one sentence. A diagnostic question, a design choice, a compliance check and a teaching comparison may use the same observation differently.
Every worked case includes a counterexample with one familiar surface feature and a different mechanism underneath. The pair matters because a definition becomes useful only when the learner can reject a tempting near-match.
The evidence route treats missing information honestly. An unknown method, reference condition or boundary stays blank until a source supplies it; a plausible assumption may complete the arithmetic while weakening the conclusion.
The transfer route changes scale, location, timing or composition without silently changing every other field. Predict the direction first, then calculate or inspect the result.
The reporting route keeps measurement and judgement separate. State what was observed, what rule produced the derived value, what uncertainty remains and which action follows only under the declared conditions.
The final check is reader-facing: a person entering through the short answer should know the distinction, a person following the worked example should reproduce it, and a person using the sources should see where the example ends.
A useful misconception test asks the learner to construct two cases with the same headline number and different underlying records. If the interpretation changes, the omitted condition belongs in the result.
Where a standard leaves behaviour to the platform, method or competent decision-maker, the article says so directly. A boundary is useful evidence because it tells the reader which conclusion can travel.
The examples avoid hidden precision. Rounded display values remain linked to the unrounded calculation, and stipulated inputs are labelled as teaching data.
A complete explanation keeps three layers apart: the thing in the world, the method that turns it into a value, and the decision made from that value. When two labels sit in different layers, numerical agreement is evidence to investigate rather than permission to merge their meanings.
For each central example, sketch the boundary before calculating. Mark what crosses it, what stays outside, what the instrument or algorithm can observe, and what must be inferred. This small diagram prevents a later percentage, ratio or diagnostic label from silently changing its object.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Read the short answer first: preserve the resource’s natural dimensions and the computed aspect-ratio property as separate evidence. Then trace which preferred ratio the sizing algorithm uses before applying constraints and object fitting.
ROUTE 1 · CHAPTERS 1–4
Define the quantities
Name the quantities, reference conditions and reporting rules.
ROUTE 3 · CHAPTERS 9–12
Audit the evidence
Check instruments, algorithms, assumptions and rival explanations.
ROUTE 5 · CHAPTERS 17–20
Report and continue
Repair shortcuts, answer questions and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–4
1. Name natural and preferred ratios
2. Keep natural dimensions separate
Work the mechanism · Chapters 5–8
5. Work the central image case
6. Separate preferred ratio from object fitting
Audit the evidence · Chapters 9–12
9. Audit width and height attributes
10. Audit late resource discovery
Transfer the reasoning · Chapters 13–16
Report and continue · Chapters 17–20
17. Repair intrinsic ratio equals computed aspect-ratio
18. Repair object-fit changes element size
A replaced element can have a natural or intrinsic aspect ratio supplied by its resource. CSS sizing works with a preferred aspect ratio, which may come from that natural ratio or from the aspect-ratio property under defined rules.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
An image resource is 1200 by 800, giving natural ratio 3:2. With width 450px and auto height, the preferred ratio can produce a 300px height.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Add aspect-ratio:1/1 and determine whether auto plus the specified ratio defers to the natural ratio.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Exact used sizing depends on the full CSS sizing algorithm and constraints.
Natural width, natural height and natural aspect ratio are related resource facts but are not interchangeable. Some replaced elements have one or more missing natural dimensions.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
An SVG supplies a viewBox ratio but no absolute natural width or height. Record the ratio separately from missing dimensions.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Give the SVG explicit CSS width and leave height auto, then resolve the dependent dimension.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Embedded formats and element types have specific natural-size rules.
The property accepts auto, a ratio, or auto together with a ratio. For replaced elements, the combined form can use the specified ratio until natural content is available and then prefer the natural ratio.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Use aspect-ratio:auto 4/3 on a late-loading 3:2 image. Reserve 400 by 300 first, then explain the potential 400 by 267 natural-ratio result.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Change the declaration to 4/3 without auto and predict which ratio remains preferred.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Loading and layout-shift behavior also depends on attributes and browser timing.
The preferred aspect ratio normally works with the box dimensions defined by the property and box-sizing rules; the natural ratio of a replaced element relates to its content. Borders and padding can make outer dimensions differ.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
A 300 by 200 content box receives 10px padding and 2px borders, so the border box is 324 by 224 although the content ratio is 3:2.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Switch box-sizing and explicit dimensions while preserving the resource.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Do not compare outer screenshots to content ratios without box geometry.
The central image has natural dimensions 1200 by 800, CSS width 450px, height auto and aspect-ratio:auto 4/3. Once loaded, auto allows the natural 3:2 ratio to become preferred.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Calculate the resulting 300px content height, then record the earlier 337.5px fallback that 4:3 could reserve before load.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Remove auto from the property and recalculate 450 by 337.5.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
The simplified case excludes min/max constraints and transferred sizes.
CHAPTER 6 OF 20 · Work the mechanism
6. Separate preferred ratio from object fitting
Object-fit controls how replaced content is rendered inside an already resolved content box. It does not by itself choose the element’s used width and height.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Resolve a 400 by 300 box first, then fit a 3:2 image with object-fit:contain, leaving letterboxing.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Change only object-fit to cover and observe cropping without changing the box ratio.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Object-position affects placement, not preferred sizing ratio.
When one axis is definite and the other is automatic, a preferred aspect ratio can transfer a size to the automatic axis, subject to min/max and available-space rules.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Width is 360px and preferred ratio 16:9, producing 202.5px height before constraints.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Add max-height:180px and trace the clamped result rather than blindly preserving both dimensions.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Constraint transfer can require the complete sizing specification.
If both width and height are definite, the box need not preserve its preferred aspect ratio. The content may stretch or object-fit may render it within that box.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Set width 400px and height 400px on a 3:2 image. The element box is square even though the natural ratio remains 3:2.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Return height to auto and compare the used result.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Author declarations can intentionally distort or crop content.
HTML width and height attributes can provide presentational hints and an intrinsic ratio used for space reservation. They are not merely the same as CSS declarations in every cascade situation.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
An img has width=1200 height=800 and CSS width:100%; height:auto. The attributes help reserve a 3:2 slot.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Change the resource to a 4:3 file without updating attributes and inspect the mismatch.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
HTML mapping rules and loading behavior must be checked in the target browser.
Before image metadata arrives, the browser may know only attributes or the specified fallback ratio. After discovery, the natural ratio can change the preferred ratio when auto participates.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Reserve 16:9 for a resource that later reports 4:3, and record the layout shift if no other dimensions constrain it.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Supply correct attributes and compare the reserved geometry before load.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Network timing is not a sizing rule but exposes missing information.
CHAPTER 11 OF 20 · Audit the evidence
11. Audit min-content and max-content contributions
Intrinsic size contributions can use the preferred aspect ratio to transfer constraints across axes. A grid or flex item may therefore affect track sizing even before final used dimensions are known.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
A replaced item has min-width 240px and 3:2 preferred ratio, contributing a related block size under the specified sizing context.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Place it in a narrower grid track and trace clamping and overflow separately.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Intrinsic contribution formulas vary by formatting context.
Min-width, max-width, min-height and max-height can override a ratio-derived suggestion. The final box may not match the preferred ratio when constraints conflict.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
A 16:9 item wants 320 by 180 but min-height is 220. Record the constraint that breaks the ratio.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Remove min-height and verify the preferred ratio returns.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Constraint violations should be diagnosed from computed and used values.
A video element can have dimensions and ratio from its video resource, while a poster supplies visual content during loading. Do not assume the poster ratio defines the video element’s natural ratio in every stage.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
A 16:9 video uses a 4:3 poster inside a reserved 16:9 box. Trace sizing and painting separately.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Remove the video metadata and inspect the fallback dimensions.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Media-element rules and states require current HTML specification checks.
SVG can expose a ratio through viewBox and preserveAspectRatio even when natural dimensions are missing. CSS preferred sizing and SVG internal fitting remain distinct layers.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
An SVG viewBox 0 0 300 200 has ratio 3:2 and is placed in a 400 by 300 CSS box.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Change preserveAspectRatio inside the SVG without changing the outer element box.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
SVG fragment and embedding modes can alter behavior.
Flex and grid algorithms use transferred size suggestions, min-size rules and available space. A ratio that produces a simple result in block layout can meet different constraints in a track or flex line.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Place a 3:2 image in a 250px grid column with auto rows, then add min-height:200px and record the changed track contribution.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Move the same element into a flex row with shrinking enabled.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
A reduced test should include every relevant min-size declaration.
The picture element can select sources with different natural ratios at different breakpoints. A single hard-coded fallback ratio may reserve the wrong shape for one source.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Desktop selects 3:2 and mobile selects 1:1. Match width and height hints to the selected source when the HTML mechanism supports it.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Resize across the source switch and observe reservation before each resource loads.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Source-selection support and authoring rules evolve.
CHAPTER 17 OF 20 · Report and continue
17. Repair intrinsic ratio equals computed aspect-ratio
The natural ratio is resource data; the computed aspect-ratio property is a CSS value. The preferred ratio used in sizing is determined from them under the property’s rules.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Record natural 3:2, computed auto 4/3 and used preferred 3:2 after load in three separate fields.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Change to computed 4/3 and show that resource data remains 3:2.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Devtools labels can differ, so inspect specified, computed and used stages.
Object-fit changes how content fits the resolved content box. It cannot repair a wrong width, height or preferred-ratio assumption.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
A square box remains square under contain and cover; only the rendered image region changes.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Set height:auto and remove the definite square constraint before expecting ratio-derived height.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Layout and painting should be debugged in that order.
Record HTML attributes, selected resource, natural dimensions, computed width and height, aspect-ratio value, min/max constraints, box-sizing, object-fit and loading stage.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Create four rows: unloaded fallback, loaded auto ratio, explicit ratio, and both axes definite. Capture computed and bounding dimensions.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Change one field per row and predict the result before reload.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Browser bugs require a minimal testcase and current specification comparison.
A defensible explanation names the natural resource facts, computed property, preferred ratio chosen by the algorithm, constraints and final content box.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Write: “The image natural ratio is 3:2; auto 4/3 used 4:3 as the fallback, then the loaded natural ratio supplied the preferred ratio and width 450px yielded height 300px.”
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Ask another reader which declaration would keep 4:3 after load.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
The example is a standards-based teaching case, not a compatibility guarantee.
Continue through the verified reading route
Replaced-element size before object fit
Replaced-element size before object fit. Use this for the full order from element sizing to content fitting.
Intrinsic content size and placeholders
Intrinsic content size and placeholders. Use this for off-screen placeholder dimensions rather than image natural ratio.
Percentage heights and indefinite containing blocks
Percentage heights and indefinite containing blocks. Use this when a percentage size lacks a definite reference.
Frequently asked questions
Is the intrinsic ratio always the used ratio?
No. CSS can supply another preferred ratio and constraints can produce a box that does not preserve it.
Does object-fit change the element box?
No. It fits content inside the already resolved box.
Why use auto with a fallback ratio?
It can reserve a provisional shape, then allow a replaced element’s natural ratio to become preferred when available.
Authoritative sources and further reading
W3C CSS Sizing Module Level 3. Defines natural dimensions, preferred sizes, intrinsic contributions and replaced-element sizing terms.
W3C CSS Sizing Module Level 4. Defines preferred aspect ratio and the aspect-ratio property including auto plus ratio behavior.
W3C CSS Images Module Level 3. Defines object sizing and fitting of replaced content after the element box is resolved.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.