So positionieren Sie das Symbol in der oberen rechten Ecke des Bildes

Ziel:
Dieses Erweiterungssymbol sollte sich in der oberen rechten Ecke des Bildes befinden, unabhängig von der Größe des Bildes in Bezug auf Responsive Design und maximale Größe.So positionieren Sie das Symbol in der oberen rechten Ecke des Bildes

Problem:
Ich habe versucht, es zu lösen, aber leider habe ich versagt.

Info:
* Bitte beachten Sie auch Konto Responsive Design nehmen
* I Bootstrap v3 bin mit

Thank you!

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

Quelle

2017-01-27 What' sUP

Da Ihr Symbol ist absolut Position, oben und rechts auf seine Offset-Mutter relativ. Haben Sie versucht, nicht oben und rechts zu setzen, verwenden Sie stattdessen einen negativen linken Rand, um das Symbol über das Bild zu ziehen. –

oben rechts von welchem Bild von 3 darin verwendet? –

Etwas Ähnliches.

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>

Quelle

2017-01-27 08:55:04

Vielen Dank für Ihre Hilfe! –

So positionieren Sie das Symbol in der oberen rechten Ecke des Bildes

Antwort

Verwandte Themen