Image sizing basics in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What attribute controls the width of an image in HTML?

The width attribute controls the width of an image in HTML. You can set it in pixels or as a percentage.

beginner

How do you keep an image's aspect ratio when resizing it?

To keep the aspect ratio, set only width or height, not both. The browser adjusts the other dimension automatically.

beginner

What CSS property can you use to control image size?

You can use the CSS properties width and height to control image size. For example, img { width: 50%; height: auto; }.

beginner

What happens if you set both width and height attributes to different proportions than the original image?

The image will stretch or squash, changing its original shape and possibly looking distorted.

intermediate

Why is it better to use CSS for image sizing instead of HTML attributes?

Using CSS separates content from design, making it easier to update styles and keep HTML clean. CSS also offers more control and responsiveness.

Which attribute sets the width of an image in HTML?

A width

B size

C length

D scale

The width attribute sets the width of an image in HTML.

If you want to keep an image's shape, what should you do when resizing?

A Set both width and height to new values

B Set only width or only height

C Set width and height to zero

D Use the <code>size</code> attribute

Setting only width or only height lets the browser keep the aspect ratio automatically.

Which CSS property is used to control image height?

A margin

B font-size

C height

D padding

The CSS property height controls the height of an image.

What is the visual effect of setting width and height to values that don't match the image's original ratio?

A Image stretches or squashes

B Image becomes blurry

C Image disappears

D Image stays the same

The image will stretch or squash, changing its shape and possibly looking distorted.

Why is CSS preferred over HTML attributes for image sizing?

A CSS is faster to write

B HTML attributes don't work in modern browsers

C CSS makes images load faster

D CSS allows better control and responsiveness

CSS offers more control, keeps design separate from content, and supports responsive layouts.

Explain how to resize an image in HTML while keeping its original shape.

Think about which attribute to set to avoid distortion.

Describe the difference between resizing images using HTML attributes and CSS.

Consider how design and content are managed.