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.

Practice

1. Which HTML attribute is used to set the width of an image directly in the tag?

easy

A. width

B. size

C. length

D. scale

Solution

1. Step 1: Identify image sizing attributes

   The width attribute is used in the <img> tag to set the image width in pixels or percentage.

2. Step 2: Confirm correct attribute name

   Among the options, only width is a valid HTML attribute for image sizing.

3. Final Answer:

   width -> Option A

4. Quick Check:

   Image width attribute = width [OK]

Hint: Use width or height attributes for quick sizing [OK]

Common Mistakes:

• Confusing size with width
• Using CSS property names as HTML attributes
• Trying to use scale which is not valid

2. Which of the following is the correct way to set an image width to 200 pixels in HTML?

easy

A. <img src='photo.jpg' width='200px'>

B. <img src='photo.jpg' style='width: 200'>

C. <img src='photo.jpg' width='200'>

D. <img src='photo.jpg' height='200px'>

Solution

1. Step 1: Understand HTML attribute value format

   In HTML, the width attribute expects a number representing pixels without units.

2. Step 2: Check each option

   <img src='photo.jpg' width='200px'> uses '200px' which is invalid for the width attribute. <img src='photo.jpg' width='200'> correctly uses '200' without units. <img src='photo.jpg' style='width: 200'> uses CSS syntax incorrectly inside an attribute. <img src='photo.jpg' height='200px'> sets height, not width.

3. Final Answer:

   <img src='photo.jpg' width='200'> -> Option C

4. Quick Check:

   Width attribute value is number only [OK]

Hint: Use numbers only for width/height attributes, no units [OK]

Common Mistakes:

• Adding 'px' units inside width or height attributes
• Confusing CSS style syntax with HTML attributes
• Setting height instead of width by mistake

3. What will be the visual result of this HTML code?

<img src='flower.jpg' width='150' height='100'>

medium

A. Image not shown due to invalid attributes

B. Image shown with width 150px and height 100px, possibly distorted

C. Image shown with height 100px, width auto to keep ratio

D. Image shown with width 150px, height auto to keep ratio

Solution

1. Step 1: Understand width and height attributes together

   When both width and height are set, the image is forced to those exact dimensions, ignoring original proportions.

2. Step 2: Predict visual effect

   Because the original image ratio may differ, forcing both width and height can distort the image shape.

3. Final Answer:

   Image shown with width 150px and height 100px, possibly distorted -> Option B

4. Quick Check:

   Both width and height set = fixed size, possible distortion [OK]

Hint: Setting both width and height fixes size, may distort image [OK]

Common Mistakes:

• Assuming height auto adjusts when both attributes set
• Thinking image keeps original ratio automatically
• Believing invalid attributes cause image not to show

4. Identify the error in this HTML code for sizing an image:

<img src='cat.png' width='300' height='auto'>

medium

A. Using 'auto' in height attribute is invalid in HTML

B. Using '300' without units in width attribute is invalid

C. Missing closing slash in <img> tag

D. No error, code is correct

Solution

1. Step 1: Check width attribute value

   The width attribute correctly uses the number '300' without units.

2. Step 2: Check height attribute value

   Height attribute does not accept 'auto' as a value in HTML attributes; it only accepts numbers.

3. Final Answer:

   Using 'auto' in height attribute is invalid in HTML -> Option A

4. Quick Check:

   Height attribute must be number, not 'auto' [OK]

Hint: Height and width attributes accept only numbers, no 'auto' [OK]

Common Mistakes:

• Using CSS values like 'auto' in HTML attributes
• Thinking <img> needs closing slash in HTML5
• Thinking width attribute requires 'px' units

5. You want an image to always fill the width of its container but keep its height proportional. Which CSS style should you use?

hard

A. width: auto; height: auto;

B. width: auto; height: 100%;

C. width: 100px; height: 100px;

D. width: 100%; height: auto;

Solution

1. Step 1: Understand responsive image sizing

   Setting width: 100% makes the image fill the container's width.

2. Step 2: Maintain aspect ratio

   Setting height: auto lets the browser calculate height to keep the image's original proportions.

3. Final Answer:

   width: 100%; height: auto; -> Option D

4. Quick Check:

   Width 100% + height auto = responsive proportional image [OK]

Hint: Use width 100% and height auto for proportional responsive images [OK]

Common Mistakes:

• Setting fixed height breaks aspect ratio
• Using auto width with fixed height distorts image
• Setting both width and height fixed loses responsiveness