2013-04-01 149 views
0

在我的網站,我允許用戶發表評論有名稱和圖片。我注意到一個問題是,當某個人在使用html代碼發表評論時發佈了更大的圖片時,它將用盡評論框。所以我想要的東西應該留在評論框內。無論他們發佈多大的圖片。我已經發布了所有的細節,請親切地幫助感謝:|我的評論用完評論箱

enter image description here

我的HTML

<div class="mycomment"> 
     <div id="postpic"> 
      <img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class=""> 
     </div> 
     <div class="mycommentpost">      
      <a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br> 
      <img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt=""> 
     </div> 
</div> 

我的CSS:

.mycomment { 
font-weight: normal; 
color: #000000; 
border: 2px solid #DEDEDE; 
letter-spacing: 1pt; 
font-family: arial, helvetica, sans-serif; 
float: left; 
width: 550px; 
margin: 20px 0; 
} 

#postpic { 
float: left; 
width: 70px; 
} 

.mycommentpost { 
font-weight: normal; 
color: #000000; 
letter-spacing: 1pt; 
width: 480px; 
float: right; 
} 

.postername { 
color: #580000; 
font-weight: bold; 
font-size: 1em; 
text-decoration: none; 
} 

評論這裏只是一個畫面:

<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt=""> 

解決:通過添加此 - >

.mycommentpost > img{ 
    max-height: XXXpx !important; 
    max-width: XXXpx !important; 
} 
+0

縮小圖像的寬度和高度 –

回答

2

添加到您的CSS

.mycommentpost > img{ 
    max-height: XXXpx !important; 
    max-width: XXXpx !important; 
} 

這樣,您將限制最大添加圖像的大小..

+0

我會給嘗試@Svetlio – deerox

+0

這個工作:)謝謝你這麼多@Svetlio – deerox

+0

我想問另一個問題我可以設置DIV最大高度相同的方式,因爲我們沒有因爲一些用戶發佈div到:) – deerox

0

試試這個

<div class="mycomment"> 
    <div id="postpic"> 
     <img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class=""> 
    </div> 
    <div class="mycommentpost">      
     <a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br> 
     <img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt=""> 
    </div> 

.mycommentpost { 
font-weight: normal; 
color: #000000; 
letter-spacing: 1pt; 
width: 480px; 
float: left; 
} 
.mycommentpost img{ 
width :450px; 
} 
0

無論使用此css上傳的圖片大小是多少,都會在mycommentpost div中將圖片設置爲默認大小。

> .mycommentpost img{ 
>  border: 1px solid #DEDEDE; 
>  padding: 10px; 
>  width: 130px; }