Which statement creates a responsive image style rule?
A) img { max-width: 100%; height: auto; }
B) img { max-width: auto; height: screen-width; }
C) screen { img-width: 100%; height: 100%; }
D) screen { img-width: auto; height: 100%; }

Question

Which statement creates a responsive image style rule?
A) img { max-width: 100%; height: auto; }
B) img {  max-width: auto;  height: screen-width;  }
C) screen {  img-width: 100%;  height: 100%;  }
D) screen {  img-width: auto;  height: 100%;  }

Quizplus · Accepted Answer

The style rule in option A sets a maximum width of 100% for the image and lets its height automatically adjust to maintain proportions. This ensures that the image will resize appropriately on different devices and screen sizes, making it responsive. Option B incorrectly attempts to set the height of the image to the width of the screen, which is not a valid CSS property. Option C attempts to define CSS styles for the entire screen, rather than for a specific element, while option D sets the height of the image as 100% without defining its width, which can cause distortion.

Which Statement Creates a Responsive Image Style Rule