位置圖片符合文字？

我試圖讓圖像直接坐在導引欄的左側，我已經幾乎找到它了，實際上它可以很好地處理小圖像，但是一旦我創建了一個更大的圖像，向上。位置圖片符合文字？

我試圖讓圖像的權利像20px一樣小，但它沒有區別。

我還沒有試過改變寬度，因爲我需要寬度保持不變。我並沒有改變尺寸的高度，但與裁剪，請參閱下面的CSS以獲得更多關於我如何做的信息。

Unfortinately因爲計算器說，格式是不允許的，但這裏是它的外觀預覽我不能把圖像：

http://image.prntscr.com/image/2445963b2dda43399a32c152675ceaa3.png

CSS：

#clip { 
    position: absolute; 
    clip: rect(0, 100px, 70px, 0); 
    /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */ 
}

HTML：

<ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
        <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown"> 
         <img id="clip" src="https://www.habbo.com.br/habbo-imaging/avatarimage?hb=img&figure=hr-828-52.hd-180-1.lg-280-1422.ch-3032-66-1408&action=wav&direction=2&head_direction=3&gesture=sml&size=m" /> 
&nbsp;&nbsp;Adam Sandler <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#"><i class="fa fa-cog"></i> Account</a></li> 
               <li class="divider"></li> 
         <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li> 
        </ul> 
       </li> 
       </ul>

我也使用bootstraps css，但我不會粘貼所有這裏。

我已經把所有的代碼都一起上的jsfiddle： http://jsfiddle.net/ovjfeukc

來源

2017-03-22 Beefo

我不知道，如果下面的是你的願望，但你可以改變position: absolute;到display: inline-block;

#clip { 
 
    display: inline-block; 
 
    clip: rect(0, 100px, 70px, 0); 
 
    /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */ 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<ul class="nav navbar-nav navbar-right"> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown"> 
 
     <img id="clip" src="https://www.habbo.com.br/habbo-imaging/avatarimage?hb=img&figure=hr-828-52.hd-180-1.lg-280-1422.ch-3032-66-1408&action=wav&direction=2&head_direction=3&gesture=sml&size=m" /> &nbsp;&nbsp;Adam Sandler <b class="caret"></b></a> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#"><i class="fa fa-cog"></i> Account</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

希望它有幫助

來源

2017-03-22 15:06:54

您還有導致放置問題的.profile-image鏈接標記的填充。圖像上也不需要絕對定位。我只是用高度屬性縮小它，但你可以擺弄它。試試這些類：

.profile-image {padding-top:0 !important; padding-bottom:0 !important;} 

#clip {height:50px;}

http://jsfiddle.net/7845apm9/

來源

2017-03-22 15:09:29

位置圖片符合文字？

回答

相關問題