Responsive images in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for an image to be responsive in web design?

A responsive image automatically adjusts its size to fit the screen or container it is in, so it looks good on all devices like phones, tablets, and desktops.

beginner

Which Bootstrap class makes an image responsive?

The <code>.img-fluid</code> class in Bootstrap makes an image scale nicely to the parent container by setting <code>max-width: 100%</code> and <code>height: auto</code>.

beginner

Why should you use alt attributes with images?

The alt attribute provides alternative text for images. It helps screen readers describe the image to visually impaired users and improves accessibility.

intermediate

How does the srcset attribute help with responsive images?

The srcset attribute lets the browser choose the best image size to load based on the device's screen size and resolution, saving bandwidth and improving load speed.

intermediate

What CSS properties does Bootstrap's <code>.img-fluid</code> class use to make images responsive?

It uses max-width: 100% to limit the image width to its container and height: auto to keep the image's aspect ratio.

Which Bootstrap class should you add to an <img> tag to make it responsive?

A .img-scale

B .img-responsive

C .responsive-img

D .img-fluid

Bootstrap uses the class .img-fluid to make images scale responsively.

What does the CSS property max-width: 100% do for an image?

A Prevents the image from becoming wider than its container

B Makes the image always 100 pixels wide

C Sets the image width to 100% of the screen

D Fixes the image size regardless of container

max-width: 100% limits the image width to the container's width, preventing overflow.

Why is it important to include the alt attribute on images?

A It changes the image size

B It improves accessibility for screen readers

C It adds a border around the image

D It makes the image responsive

The alt attribute provides text for screen readers, helping users who cannot see the image.

What does the srcset attribute do in an <img> tag?

A Specifies multiple image sources for different screen sizes

B Sets the image border style

C Defines the image caption

D Adds a hover effect to the image

srcset allows the browser to pick the best image size based on device resolution and screen size.

If an image has height: auto in CSS, what happens?

A The image height is fixed and does not change

B The image height becomes zero

C The image height adjusts to keep its original proportions

D The image height doubles

height: auto keeps the image's aspect ratio when the width changes.

Explain how to make an image responsive using Bootstrap classes and why it is important.

Think about how images behave on phones versus desktops.

Describe the role of the alt attribute and the srcset attribute in responsive images.

One helps people, the other helps devices.