Flexible Images

Question 1

What css rule allows us to create fluid images?

Answer 1

img {
max-width: 100%;
}

Question 2

We can apply max-width to other media (e.g. video, embed elements) to make them flexible. True or false?

Answer 2

True

img, embed, object, video, {
max-width: 100%;
}

Question 3

What’s the difference between max-width: 100% and width: 100%?

Answer 3

max-width: means an item can take up to 100% of the containing element. Width means it’s 100% of the containing element.

Question 4

What happens if an image is wider than it’s container?

Answer 4

It will break its container and bleed out to display all of the image

Question 5

What Microsoft css filter can we use to address issues with artefacts in css scaled images?

Answer 5

AlphaImageLoader

.logo {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”sample.png”, sizingMethod=”scale”);
}

Question 6

Apart from making our images flexible, what are other options for dealing with images that exceed their container

Answer 6

Use Css:

Overflow: hidden - This would hide parts of the image that did not fit their container.