How do i fit the image inside its parent div, nothing seems to work-CodePudding

Nothing seems to make the image size stay inside the dimensions of the div. Here is the html code and the css code that corresponds to it. I have tried max width max height as well as object contain and width and height set to 100%

HTML:

<div >
    <div >
        
    <div >
        <div >
            <form asp-action="SignIn">
                <div >
                    <img src="~/Assets/SignUp.png" alt="logo image" />
                </div>
                <h4>Sign up to Snippet</h4>
                <div >
                    <input  placeholder="Full Name" />
                </div>
                <div >
                    <input  placeholder="Email" type="email" />
                </div>
                <div >
                    <input  placeholder="Phone Number" />
                </div>
                <div >
                    <input  placeholder="Company" />
                </div>
                <div >
                    <input  placeholder="Title" />
                </div>
                <div >
                    <input  placeholder="Password" type="password" />
                </div>
                <div >
                    <input  placeholder="Confirm Password" type="password" />
                </div>
                <div >
                    <input type="submit" value="Sign up"  />
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

CSS:

.container {
    background-color: white;
    width: 50%;
}

.logo-container {
    width: 80%;
    max-height: 400px;
}

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

CodePudding user response：

you would need to make the display on the div inline-block and set it's dimensions. Then the img will take % from its parent

div{
height:100px;
width:100px;
display:inline-block;}

img{
height:100%;
width:100%;
}

#a{
width:50%;
height:50%;
display:block;
}

<div>
<img src = "https://via.placeholder.com/200x200">
</div>


<div id='a'>
<img src = "https://via.placeholder.com/200x200">
</div>

CodePudding user response：

Weird!

Is your css file linked properly?
are you sure there are no spelling mistakes on class names?

maybe try setting img as img {display: inline-block;}

Else, you can just add a overflow of hidden on the img's parent div .logo-container {overflow: hidden}

Also check if you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside your <head></head>. It's a very important tag/attribute that displays page based on users screen size (makes your site responsive).