CODEWITHSUNDEEP
htmlcss
sonnyk2016
sonnyk2016

Reputation: 111

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>

Upvotes: 0

Views: 339

Answers (1)

Emre Sakarya
Emre Sakarya

Reputation: 122

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

Upvotes: 2

Related Questions