Which technique helps ensure images scale properly across devices?

Which technique helps ensure images scale properly across devices?

• A. max-width: 100%; height: auto;
• B. display: block
• C. position: absolute
• D. float: left

Answer: (A)

To get images to scale nicely on different devices, you want them to fit the available space without losing their shape. Setting max-width: 100% ensures the image cannot become wider than its parent container, so on smaller screens it shrinks to fit. Height: auto then keeps the image’s height proportional to its width, preserving the aspect ratio as it scales. Note that if the image is smaller than the container, max-width won’t enlarge it beyond its natural size, which can be desirable to avoid upscaling. If you instead used width: 100%, the image would stretch to fill the container even when it’s smaller, potentially reducing sharpness. The other options don’t address scaling behavior: display: block only affects layout flow, position: absolute removes the image from the normal flow, and float: left changes layout without ensuring the image size adapts to different devices.

To get images to scale nicely on different devices, you want them to fit the available space without losing their shape. Setting max-width: 100% ensures the image cannot become wider than its parent container, so on smaller screens it shrinks to fit. Height: auto then keeps the image’s height proportional to its width, preserving the aspect ratio as it scales. Note that if the image is smaller than the container, max-width won’t enlarge it beyond its natural size, which can be desirable to avoid upscaling. If you instead used width: 100%, the image would stretch to fill the container even when it’s smaller, potentially reducing sharpness. The other options don’t address scaling behavior: display: block only affects layout flow, position: absolute removes the image from the normal flow, and float: left changes layout without ensuring the image size adapts to different devices.