sonnyk2016 sonnyk2016 - 1 month ago 18
CSS Question

Image jumping out of div

The image jumps out of the DIV container and I need help fixing it. This is what it looks like now:

enter image description here

The red border of div should surround the gray border of image. Can someone please help. Thank you so much in advance. Below is the full code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Index</title>
<style>
html
{
width: 100%;
overflow-x: hidden;
}

body
{
padding:0px;
margin:0px;
width: 100%;
max-width:100%;
height:100%;
overflow-x:hidden;
}

.mainpage-profile-nopic
{
width:100%;
max-width:947px;
margin:0px auto;
margin-bottom:10px;
overflow:hidden;
height:100%;
}

.mainpage-profpic
{
border:1px solid red;
max-width:10%;
width:100%;
height:100%;
padding:0px;
float:left;
}

div.mainpage-profpic > img
{
max-width:100%;
max-height:100%;
vertical-align: top;
border:5px solid #EAEDED;
display:inline-block;
}

</style>
</head>
<body>
<div class="mainpage-profile-nopic">
<div class="mainpage-profpic"><img src="testimg.jpg"></div>
</div>
</body>
</html>

Answer
div.mainpage-profpic > img 
     {
           max-width:100%; 
           max-height:100%; 
           vertical-align: top; 
           border:5px solid #EAEDED;     
           display:inline-block;
box-sizing: border-box;    
     }
Comments