css在img上的绝对定位，会改变大小

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