Placer l'insigne sur le coin de l'image automatiquement

EDIT3: cette solution est très similaire à la mienne. Je n'ai pas vraiment regardé ton code, donc j'aurais dû le remarquer plus tôt. Votre étiquette a est déjà enveloppant chaque image donc vous pouvez juste ajouter le badge là-dedans et le positionner absolu. L'étiquette a n'a pas besoin de largeur/hauteur. Vous devez également ajouter l'image du badge au début de votre étiquette a .

Démo: http://jsfiddle.net/wdm954/czxj2/1 /

div.free_tile {
    width: 176px;
    height: 206px;
    float: left;
}

a.img_container {
    display: block;
    margin-bottom: 10px;
}

span.transect_badge {
    display:block;
    position: absolute;
    height: 20px;
    width: 20px;
    background-image: url('/images/transect-badge.png');
}

HTML...

<a class="img_container canonical" href="/photos/10">
    <span class="transect_badge"></span>
    <img class="canonical" src="path/to/img" />
</a>

---

autres solutions...

dans mon code j'utilise des balises SPAN pour simuler des images, mais c'est la même idée. L'image de l'insigne, lorsqu'elle est positionnée absolute , créera l'effet désiré.

Démo: http://jsfiddle.net/wdm954/62faE /

EDIT: Dans le cas où vous avez besoin de jQuery pour la position. Cela devrait fonctionner (où .la boîte est votre conteneur et .le coin est l'image de l'insigne)...

$('.box').each(function() {
    $(this).find('.corner')
        .css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
    $(this).find('.corner')
        .css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});

EDIT2: une autre solution serait d'envelopper chaque image avec un nouveau conteneur. Vous devrez déplacer le code que vous utilisez pour centrer chaque image dans la classe du nouveau conteneur d'emballage.

Démo: http://jsfiddle.net/wdm954/62faE/1 /

$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');

Techniquement, vous pouvez juste ajouter quelque chose comme ceci votre HTML cependant sans utiliser jQuery pour l'insérer.

utilisez un élément autre que <div> , p.ex. <span> et insérez-le dans votre élément <a> après l'élément <img> . Ensuite, donnez l'élément <a> position:relative; et le <span> obtient position:absolute; top:0px; left:0px; . C'est, si vous n'avez pas l'esprit de l'insigne également partie de la même lien, mais c'est le moyen le plus facile. En outre, la raison d'utiliser <span> est de garder votre HTML4 valide, <div> serait toujours HTML5 valide, cependant.

j'ai trouvé une solution en utilisant jQuery. Je ne préfère car cela a un impact notable sur le chargement de la page, mais c'est acceptable si rien d'autre ne fonctionne. Je suis plus intéressé par l'idée de NGLN qui semble prometteuse, mais je n'ai pas encore tout compris. Cependant, comme ce fil a repris beaucoup de trafic, j'ai pensé que je posterais une solution que j'ai trouvé pour les futurs lecteurs à considérer:

compte tenu de cette majoration:

<div class="free_tile">
  <a class="img_container canonical" href="/photos/10">
    <img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
    <span class="transect-badge"></span>
  </a>
  <div class="location">Houston</div>
  <div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>

même CSS qu'en question sauf:

span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }

alors ce jQuery résout le problème:

$(function() {
  $('img.canonical').load( function() {
    var position = $(this).position();
    $(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
  });
});

comme je l'ai dit, cependant, cela entraîne un temps d'exécution considérable du côté du client, donc je préférerais utiliser une solution non JS si je peux. Je vais continuer à laisser cette question ouverte pendant que je teste et donne des commentaires sur les autres solutions proposées, avec l'espoir de trouver l'une d'entre elles réalisable sans JS.