Bild in Übereinstimmung mit Text positionieren?

Question

Ich versuche, ein Bild zu erhalten, direkt neben, links von einer Navigationsleiste Element auf Bootstrap, ich habe es fast, in der Tat funktioniert es perfekt mit kleinen Bildern, aber sobald ich ein größeres Bild erstellen es vermasselt oben.

Ich habe versucht, das Recht auf das Bild wirklich klein wie 20px machen, aber es macht keinen Unterschied.

Ich habe nicht versucht, die Breite zu ändern, weil ich die Breite brauche, um gleich zu bleiben. Ich ändere nicht die Größe mit der Größe, aber mit Ausschnitt, sehen Sie das css unten für mehr Informationen über, wie ich es tue.

Unfortinately kann ich das Bild nicht statt, weil Stackoverflow sagt das Format nicht erlaubt ist, aber hier ist die Vorschau, wie es aussieht:

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> 

Ich benutze auch Bootstraps CSS, aber ich werde nicht alles hier einfügen.

ich den Code alle zusammen auf jsfiddle gesetzt haben: http://jsfiddle.net/ovjfeukc

Answer 1

Ich bin nicht sicher, ob die unten ist, was Sie wünschen, aber Sie können die position: absolute; zu 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>

ändern

Ich hoffe, es hilft

Answer 2

Sie haben auch eine Auffüllung über das Link-Tag .profile-image, das das Platzierungsproblem verursacht. Sie brauchen auch keine absolute Positionierung auf dem Bild. Ich habe es nur mit dem Höhenattribut geschrumpft, aber Sie können damit herumspielen. Versuchen Sie diese Klassen:

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

#clip {height:50px;} 

http://jsfiddle.net/7845apm9/