Image sizing basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What size will the image appear in the browser?

Given this HTML code, what will be the displayed width and height of the image in the browser?

<img src="flower.jpg" width="200" height="100" alt="Flower">

HTML

<img src="flower.jpg" width="200" height="100" alt="Flower">

A The image will stretch to fill the entire browser window.

B The image will keep its original size ignoring width and height attributes.

C The image will be 100 pixels wide and 200 pixels tall.

D The image will be 200 pixels wide and 100 pixels tall.

💡 Hint

Width and height attributes set the image size in pixels unless CSS overrides them.

The width and height attributes in the <img> tag set the displayed size in pixels. Here, width=200 and height=100 means the image will appear 200 pixels wide and 100 pixels tall.

🧠 Conceptual

intermediate

What happens if only width is set on an image?

Consider this HTML:

<img src="tree.jpg" width="300" alt="Tree">

What will happen to the image's height when displayed?

HTML

<img src="tree.jpg" width="300" alt="Tree">

A The height will stretch to fill the browser window height.

B The height will be zero, so the image will not show.

C The height will adjust automatically to keep the image's original proportions.

D The height will be set to 300 pixels, making the image square.

💡 Hint

Browsers keep the image's aspect ratio if only one dimension is set.

When only width is set, the browser calculates height automatically to keep the original aspect ratio. This prevents the image from looking stretched or squished.

❓ selector

advanced

Which CSS selector correctly resizes all images inside a

element?

You want to make all images inside the <main> element have a width of 100% of their container. Which CSS selector and rule will do this?

A main img { width: 100%; }

B img main { width: 100%; }

C .main > img { width: 100%; }

D img > main { width: 100%; }

💡 Hint

The selector should target img elements inside main elements.

The selector 'main img' targets all img elements inside any main element. The rule sets their width to 100% of their container's width.

❓ accessibility

advanced

Why is the alt attribute important for images?

Which statement best explains why the alt attribute should always be included on <img> tags?

A It changes the image size automatically to fit the screen.

B It provides a text description for screen readers and shows if the image fails to load.

C It adds a border around the image for better visibility.

D It hides the image from all users to improve page speed.

💡 Hint

Think about users who cannot see images.

The alt attribute gives a text alternative describing the image. This helps screen readers for visually impaired users and shows text if the image cannot load.

❓ layout

expert

What is the visual result of this CSS on an image inside a flex container?

Given this HTML and CSS:

<div class="container"><img src="cat.jpg" alt="Cat"></div>

.container { display: flex; width: 20rem; height: 10rem; } img { flex-shrink: 0; width: 15rem; height: 15rem; }

What will you see in the browser?

HTML

<div class="container"><img src="cat.jpg" alt="Cat"></div>

<style>
.container { display: flex; width: 20rem; height: 10rem; }
img { flex-shrink: 0; width: 15rem; height: 15rem; }
</style>

A The image will be 15rem by 15rem, overflowing vertically outside the 10rem container height.

B The image will shrink to fit inside the 20rem by 10rem container exactly.

C The image will stretch to fill the container width and height.

D The image will disappear because flex-shrink is zero.

💡 Hint

flex-shrink: 0 prevents shrinking smaller than set size.

The container is 20rem wide and 10rem tall. The image is set to 15rem by 15rem and cannot shrink because flex-shrink is 0. So the image overflows vertically beyond the container's height.