Images Flashcards

1
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

img elements are display: inline by default.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A

We can use object-fit with the value of cover

object-fit: cover;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What values does the object-position property take?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly