Why the image sometimes have different size? Even on the same code

Question

When first time i run the code, the image looks like this..
https://pin.it/3bwdfrwxdtlc7f

But sometimes, when i run the code without change anything. The result is difference from the first one. It looks like this..
https://pin.it/gryoo6itzx3ity

Here is the code, its from HTML course
https://code.sololearn.com/WlO8HY7F4TnP/?ref=app

P.S i didn't Talk about pinterest and those screenshoot that i post has nothing to do with pinterest, i post those screenshoot on pinterest because i can't post an image on Q&A sololearn. Another than that, i'm sorry i'm not fluent in english.

Answer 1

50% height means half height of the whole defined space and 50% width means half width of the whole defined space

% is not equal to the px value that's why image has different sizes

revise html course provided by the sololearn team again and have some practice

Answer 2

ZΛRTHΛИ if you saying about the extra padding or something extra size at other platform or Pinterest then every platform works accordingly with their inbuilt function, and every image has prescribed height and width and property which can affect and change according to the platform innercoding and when you used that image in your code then some extra height or some smaller height can be possible which can be invisible or can be present and visible for us with small size in compressed form.

I don't work on Pinterest so don't know much behavior about that platform but I've worked in image processing and there attributes so I can say that image compressions or expansion is some time depends on platform inner functionality.

You can wait for some more answers in the thread afterwords to look what other have say about this who have worked on Pinterest

Answer 3

🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!, i think. I've already found the answer for this issue.

It happened not just for me. I've already ask「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」then she try it and the issue happens to her too. She have to exit a code and hit run again so it displays normally.

Maybe its a sololearn bug or android web viewer bug.

Answer 4

Angie i don't know html is hard or not since i haven't conpleted the course but i heard some people say its easy. For the second question, you learned it when you feels need it. Want to build a web? Then i recommend to learn html >> css >> javascript.

P.S Please don't ask questions like that on this Q&A post, its not relevant. You better to post your own question.

Answer 5

That is not the problem, GAWEN STEASY, 🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ! .

Please, check the output on the both of the link that i post. You would see the differences

Answer 6

On the second image at the second link, somehow the image are more smaller than the second image on the first link

Answer 7

No 🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!, what i mean is check the picture output that i post on the pinterest. These are the output from this code (the code that i post). Is not theirs, pinterest doesn't have anything with this.

Answer 8

Sorry GAWEN STEASY, there is nothing to do with with pinterest. Those picture is just the output from this sololearn app.

Exactly, 🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!.
There is no relation between pinterest. And i want to ask is "why sololearn this code (from HTML courses) give a different output every i run the code"

Look guys, i'm sorry my english are bad and causing missunderstanding like this but i hoped you understand it

Answer 9

I think i'm not 🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!, because these screenshot/image that i post is the "proof" it has different output after i run the code multiple times which it was made in Sololearn Playground by Sololearn itself and with the same size everytime.

If there is no any problem, then why the output at the first try is different with the second try (same code same value)

Answer 10

You mean the app (sololearn)? 🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!

Answer 11

🅰🅹 - ɪ'ᴍ ᴄʀɪᴍɪɴᴀʟʟʏ ɢᴏᴏᴅ!, I've already share it, This whole post is my question with the image link (the screenshot that i take it directly from this app then i upload it to pinterest since i can't upload it to Sololearn Q&A)

P.S No offense and i think our debate is getting nowhere. Thanks for your time and your help.

Answer 12

Mogo Flov hmmm i see, that may be true though and possible to happen.

Answer 13

And surprisingly, both of the image is the output from the code that i post. Without changing anything.

Answer 14

If i understand corretly, in sololearn app the image may randomly appears with different dimension. My 2 cents: conflict between cache and viewport

Answer 15

Because in one image you are using height and width in pixels (px) and in one image you are using height and width in percentage (%)

Answer 16

Angie Don't ask your doubt in others thread. Always ask separately.

Answer 17

ZΛRTHΛИ Check this link to know what is difference between px and %.

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

https://www.google.com/amp/s/www.hongkiat.com/blog/css-units/amp/

Answer 18

Welcome ZΛRTHΛИ I am always here to help and for the discussion also.

Answer 19

ZΛRTHΛИ If you are talking about pinterest then you should ask them What they have written in their code. But what we told that is correct.

And also I shared two links. You can check them.

Answer 20

ZΛRTHΛИ They have written a logic which load random image with different size. That's why you are getting image with different size.

And check your code there is no relation between pinterest code with your code.