divから飛び出した画像

画像がDIVコンテナから飛び出し、それを修正する手助けが必要です。これは、それが今のようになります。divから飛び出した画像

の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>

出典

2016-10-02 sonnyk2016

たいですか：以下は、完全なコードがありますか？ – phaberest

@phaberest：はい、私は画像をdivに適応させたいと思います。 – sonnyk2016

1.ボックスモデルを読み上げてください。 2.イメージに 'box-sizing：border-box;'を追加します。 – CBroe

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

出典

2016-10-02 22:09:58

はい！これは問題を解決しました。どうもありがとうございます！！！ – sonnyk2016

答えて

関連する問題