如何将图标定位在图片的右上角

Question

目标：
这个扩展图标应该在图片的右上角，无论图片的大小与响应式设计和最大尺寸有关。

问题：
我已经尝试解决它但不幸的是我失败了。

信息：
*请同时考虑响应式设计
*我正在使用 bootstrap v3

谢谢！

.expand-position-for-picture {
  border-radius: 22px;
  color: black;
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 13px 10px 14px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
  -webkit-transition: background .3s;
  transition: background .3s;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" />


<a href="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive" title="">
  <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>





<a href="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive" title="">
  <img src="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>


http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 1

像这样。

a.frame {
  position: relative;
  display: inline-block;
}
.expand-position-for-picture {
  border-radius: 22px;
  color: black;
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 13px 10px 14px;
  text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
  -webkit-transition: background .3s;
  transition: background .3s;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<a href="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive" title="">
  <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>
<a href="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive" title="">
  <img src="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive">
  <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span>
  </div>
</a>

如何将图标定位在图片的右上角

How to Position the Icon on the upper right corner of the picture

html

css

jquery

expand

twitter-bootstrap-3