Hi. Any Assessment appreciated. Thank you and have a good day!
Hi @harryghgim! These answers look pretty much perfect; well done!
You might want to check out our official answer for the second one — https://github.com/mdn/css-examples/blob/master/learn/tasks/images/marking.md#task-2-styling-simple-form-elements — it is a little bit more compact, although yours does the job well too.
Hello all: I have a question, i was trying doing just this:
img {
object-fit: cover;
}
But it does not work, now I see that the height and width need to be specified with 100% each. Why? Would not be enough indicating the object-fit?
@bucirado this is a great question. I was thinking the same thing but couldnt find an answer at the time. I gave up and should have asked as you did. I now realise that it is probably to do with the way the HTML is constructed. The HTML for test 1 has the following
<div class="box">
<img src="https://raw.githubusercontent.com/mdn/css-examples/master/learn/tasks/images/balloons.jpg" alt="balloons">
</div>
In this case the box class is the parent of the image. I think by setting the width and height the to 100% it inherits these from the box class. I found clearer examples of this demonstrated on the W3 schools site for Object fit. I hope someone else might be able to clarify this.