Question

我正在尝试将图像直接放在旁边，在引导程序上的导航栏项目的左侧，我几乎得到它，实际上它与小图像完美配合，但是只要我创建一个更大的图像它搞砸了。

我试过让图像的右边像20px一样小，但没有区别。

我还没有尝试改变宽度，因为我需要宽度保持不变。我不是用尺寸改变高度而是用剪裁来改变，请参阅下面的css以获取有关我如何做的更多信息。

不幸的是我无法放置图像，因为stackoverflow表示不允许格式化，但这里是预览它的外观：

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

CSS：

int lindex(int in[], int stin, int num){
  int size=strlen(in);
  if(stin == size){
    return -1;
  }
  int ans = lastIndex(in, stin + 1, num);
  if(ans != -1){
    return ans;
  }else{
    if(in[stin] == num){
      return stin;
    }else{
      return -1;
    }
  }
}

HTML：

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

我也使用bootstraps css，但我不会在这里粘贴所有内容。

我已将所有代码放在jsfiddle上： http://jsfiddle.net/ovjfeukc

Answer 1

我不确定以下是否符合您的要求，但您可以将position: absolute;更改为display: inline-block;

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

Answer 2

您还有.profile-image链接标记中的填充导致放置问题。你也不需要对图像进行绝对定位。我只是用height属性缩小它，但你可以摆弄它。试试这些课程：

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

#clip {height:50px;}

http://jsfiddle.net/7845apm9/

位置图像与文字一致？

2 个答案: