Question

图像跳出DIV容器，我需要帮助修复它。这就是现在的样子：

div的红色边框应围绕图像的灰色边框。有人可以请帮助。非常感谢你提前。以下是完整代码：

<!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 1

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

图像跳出div

1 个答案: