Question

我以为我一切都在工作。一个<img>，一个div.wrapper（position:relative}和一个<i class="icon-edit"></i>，其绝对位置位于<img>的右上方位置之下。像这样的东西：

<div class="userLogo" >
  <img ng-show="user.image_url"  ng-src="{{user.image_url}}" />  //data from angular, doesn't make a difference here
  <div  class="userEdit"><i class="icon-edit hand"></i></div>
</div>

用css（风格少但你能理解）：

.userLogo
{
  width: 233px;
  height: 233px;
  img {
    height:233px;
  }
  float: left;
  //border: 1px solid @borders;
  position:relative;
}

.userEdit
{
  background: @bajeBack;
  width: 25px;
  height: 25px;
  line-height: 25px;
  color: @lightGreen;
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 50;
  font-size: 19px;
  padding: 3px 2px 2px 4px;
  text-align: center;
  opacity: 0.7;
  .icon-edit{

  }
}

然后，使用webapp打它我：图像大小可以改变！因为我不想使用设定的宽度/高度（这会扭曲一些图像的比例）我只是设置高度（以适应设计）并让浏览器相应地调整宽度。

我的问题;狭窄的图像会破坏设计 - edit图标将悬空，而不是图像，因为它根据userLogo定位。

我的问题：如何根据图像进行相同的“绝对”定位？因为它不能是容器。请让我高兴。如果需要，请不要犹豫，建议更改html。我会更乐意学习新东西！

谢谢！

Answer 1

如果我理解正确，您需要将图像约束到固定空间。如何使用max-height和max-width。

.userLogo img {
   max-height: 233px; 
   max-width: 233px;
}

这些天得到了很好的支持：http://caniuse.com/#search=max-width

css对图像的绝对定位，即改变大小

1 个答案: