Img resize test case failing

[pranshugoyal]

The image resizes correctly when I change the size of browser window, but the test case fails. This is the CSS.

#img-div {
	background-color: white;
	border-radius: 3px;
	margin: 0 10px;
	padding-bottom: 1px; 
}

#image {
	object-fit: contain;
	width: min(100%, 1175px);
}

codepen link: https://codepen.io/pranshu-goyal-the-selector/pen/eYvaErX

[jwilkins.oboe]

Hi @pranshugoyal !

Welcome to the forum!

The code you posted here is different from the codepen link.
When I add in the max-with property, then a new error message pops up.

This trips up a lot of people because they don’t keep reopening up the test suite to see the new error messages.

The error messages will keep changing until all of the guidelines are met.

Hope that helps!

[jwilkins.oboe]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[pranshugoyal]

I’ve updated the code to reflect what’s present in codepen. My problem here is that the image actually resizes correctly when I resize my browser window, but the test case still fails.

[jwilkins.oboe]

@pranshugoyal

but the test case still fails.

It is failing because you are not reading the full error message.

Here is the full error message:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

I don’t see max-width here

@pranshugoyal

#image {
	object-fit: contain;
	width: min(100%, 1175px);
}

Once you change that to max-width, then a new error message will pop up.
Open up the test suite and read the new error message and add what they tell you.

Keep reading the full error messages until the test passes.

The tests are very specific and want you to provide them with the information they are looking for.
If you don’t do that, then you won’t pass the tests.

Hope that helps!

[pranshugoyal]

I understand your advice, and following the instructions from error messages I got the test cases to pass. But I’m unclear on why the code I wrote should fail the test. Because it did behave as was required:

• The image was centred
• It’s getting resized correctly if the window size changes

Yes, it did not achieve it using max-width or display:block;. I want to understand is there some case where this code will not work correctly, or do the test cases expect the code to be written in a certain way.

[jwilkins.oboe]

@pranshugoyal

or do the test cases expect the code to be written in a certain way.

For me, it makes sense that the tests were designed to look for very specific keywords like max-width and display:block;.

Thousands of people have built these projects, and it is easier to have everyone follow the exact same guidelines for the certifications.

Maybe one of the other moderators or FCC staff members has a more in depth explantation of how the tests were created but that’s how I see it.