Review on login form and problems

Hello guys, sorry to disturb you all; I'm trying to build a login form (see the picture with the instagram logo). The other uploaded pictures is how far I was able to go :c . I wanted some feedbacks, what is wrong and what can be improved... I have some questions also:

On the img tag, we add the following:

img {
    width: 100%; /* why if I remove the width of 100%, the image takes the full container causing overflow */
    height: 100%; /* Need to use it so that image take full height, why? */
    aspect-ratio: 16 / 9; /* Is it necessary to use aspect ratio? Is it good practice to use it every time we use images? I know that aspect ratio preserve the dimensions of the image */
    object-fit: cover; /* why cover here doesn't take full height? */
    display: block; /* Is it important here to set display as block? I know setting display as block on images doesn't leave any "blank" pixels */
}

img {
    width: 100%; /* why if I remove the width of 100%, the image takes the full container causing overflow */
    height: 100%; /* Need to use it so that image take full height, why? */
    aspect-ratio: 16 / 9; /* Is it necessary to use aspect ratio? Is it good practice to use it every time we use images? I know that aspect ratio preserve the dimensions of the image */
    object-fit: cover; /* why cover here doesn't take full height? */
    display: block; /* Is it important here to set display as block? I know setting display as block on images doesn't leave any "blank" pixels */
}

img {
    width: 100%; /* why if I remove the width of 100%, the image takes the full container causing overflow */
    height: 100%; /* Need to use it so that image take full height, why? */
    aspect-ratio: 16 / 9; /* Is it necessary to use aspect ratio? Is it good practice to use it every time we use images? I know that aspect ratio preserve the dimensions of the image */
    object-fit: cover; /* why cover here doesn't take full height? */
    display: block; /* Is it important here to set display as block? I know setting display as block on images doesn't leave any "blank" pixels */
}

img {
    width: 100%; /* why if I remove the width of 100%, the image takes the full container causing overflow */
    height: 100%; /* Need to use it so that image take full height, why? */
    aspect-ratio: 16 / 9; /* Is it necessary to use aspect ratio? Is it good practice to use it every time we use images? I know that aspect ratio preserve the dimensions of the image */
    object-fit: cover; /* why cover here doesn't take full height? */
    display: block; /* Is it important here to set display as block? I know setting display as block on images doesn't leave any "blank" pixels */
}

But the above questions arise.

Last thing, why on codepen, my login form isn't same as if I'm browsing the page in another tab? This is where responsiveness comes into play ? But I have use grid with columns set to 1 fr 1fr, so I don't understand why the column with the image has a smaller column size.

Here is my codepen:
https://codepen.io/Fakeur/pen/YzmmqJq

CodePenFakeur

Untitled

...

Review on login form and problems

Similar Threads

Similar Threads

Similar Threads