Images

Question 1

What is a “global” declaration that we often use with img elements, and for what effect?

Answer 1

max-width: 100% is a declaration that we often use globally. It prevents images from growing beyond their native max-size.

Question 2

Why might we set an img declaration of display: block?

Answer 2

We might set display: block to prevent the bit of spacing beneath an image for misaligning elements on our page.

Question 3

Are img elements display: inline or display: block by default?

Answer 3

img elements are display: inline by default.

Question 4

When trying to size images for art-direction what can property can we use?

Answer 4

We can use object-fit with the value of cover

object-fit: cover;

Question 5

What does the declaration object-fit: cover; do for us?

Answer 5

It allows an image to retain it’s normal proportions but crops the image to fit into the assigned width and height values. It does not deform the image in this case.

Question 6

What is another way to think about how object-fit: cover affects an image?

Answer 6

object-fit: cover crops an image to fit the constrained sizes instead of deforming the image.

Question 7

How can we influence how object-fit crops an image?

Answer 7

We can influence where the image is cropped by using the object-position property.

Question 8

What values does the object-position property take?

Answer 8

It can take ordinal direction, percentages, pixels, etc.

Question 9

When might we set a min-height on an image?

Answer 9

We might use min-height when an image can grow without breaking the layout, but shrinking is unacceptable.

Question 10

How does object-fit help us with managing bloat and performance?

Answer 10

object-fit can allow us to use a single image in multiple formats thereby reducing the number of images needed for a layout