Assessment wanted for "Images and Form Elements"

MDN Learn
#1

Hello!

I have completed the tests from Test your skills : “Images and Form Elements” and would like to be assessed.

Here’s my css -

Task One

img {
  object-fit: cover;
}

Task Two

.myform {
  border: 2px solid #000;
  padding: 5px;
}

.myform input[type="submit"] {
  border: none;
  color: white;
  background-color: rebeccapurple;
  border-radius: 5px
} 

.myform input[type="search"], input[type="submit"] {
  font-size: 100%
  padding: 10px;
}

NOTE:The image in the first task is not cropping down for me. Is it a bug? Because the code seems to be fine.

#2

Hello @Arittra! I can only see two mistakes but apart from that, great job on the test :+1:

For the first task

The problem here is that you need to set a width and a height first, if you want CSS to be able to make your object fit in a specific way. If you don’t, CSS will choose them for you and for the case of a picture the width and height chosen are the width and height of the <img> element (which, in turn, are by default set to the width and height of the source picture).

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

If you go over the lesson related to this test once more you will notice that when object-fit is used, both width and height are explicitly set.

For the second task

You did :tada: great :tada: You just forgot a semi-colon after font-size: 100% which makes CSS absolutely ignore that line. This is, perhaps, the most common mistake.

Have a great day!

1 Like