0
ゴール:
この拡張アイコンは、レスポンシブデザインと最大サイズに関係なく、画像のどのようなサイズにも関係なく、画像の右上に配置する必要があります。画像の右上にアイコンを配置する方法
問題:
私はそれを解決しようとしましたが、残念ながら私は失敗しました。
情報:
*私は
はありがとうブートストラップ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>
あなたのアイコンが絶対位置、上と右であるためには、そのオフセット親を基準にしています。右上と左下を設定しないで、代わりにマイナスの左余白を使用してアイコンを写真に戻してみましたか? –
右上には3つの画像のうちどれが使用されていますか? –