Parent div not wrapping image inside it - html

Question

i'm working with a website.i have a problem with the divs
<div class="parent">
<div class="child" style="display:inline-block; z-ndex:1000;">
<img src="" style="max-width:100%; max-height:100%"/>
</div>
</div>
html:
.parent {
clear: both;
float: left;
padding:0 2%;
width: 98%;
padding:0 1%;
display: block;
height:557px;
}
I have my html like this, i want my child div to wrap around the image so i gave it inline-block. but if the image is large, i'm getting the image out of the parent div.
Is there any way that it get fixed in the parent div.
Any help please .

Answer 1

you should set some style attributes .i.e. height and width of outer[parent] div so that contents get bounded by it.
<div class="parent" style="height: 80px; width: 80px;">
<div class="child" style="display:inline-block;">
<img src="" style="max-width:100%; max-height:100%"/>
</div>
</div>

Answer 2

Try to set some height and width to your parent and Child Div.
Sample code which has image size larger than parent Div
<div class="parent" style="background-color: pink; height: 100px; width: 100px;">
<div style="display: inline-block; background-color: black; height: 80px; width: 80px;" class="child">
<img style="max-width:100%; max-height:100%" src="../somepath.JPG">
</div>
</div>

Answer 3

Mention the fixed height and width in pixel to parent DIV .Image will fix in the parent DIV
Take a look Fiddle. Actually image size 200*200 px ,parent DIV size 100*100 px .Now it will fix
HTML :
<div class="parent">
<div class="child" style="display:inline-block; z-ndex:1000;">
<img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="max-width:100%; max-height:100%"/>
</div>
</div>
CSS :
.parent
{
clear: both;
float: left;
padding:0 2%;
width: 100px;
padding:0 1%;
display: block;
height: 100px;
}

Answer 4

Now your .parent div has width:98%, As it is in % the div will attain a width 98% of the current viewport or browser window you used to view the site irrespective of the content inside..
So even if your image inside .parent div is larger, div will get only the 98% of window.
1.) if you want your image in its original size and the parent should wrapped around, you can go with this:
remove width:98% from .parent and remove max-width from image.
2.) If you are looking to resize the image with respect to the width attained by .parent
You can use the same code you are using now.