link immagine con ulteriore background

[Igreo]

La domanda forse è banale, perchè non credo ci siano soluzioni differenti dal settare il display: block; all'immagine o al link!

L'idea è la seguente:

<a href="#" style="background: url('my_img.gif');"><img src="other_my_img.gif" width="80" height="80" /></a>

Come si può notare l'immagine racchiusa nel link ha le dimensioni, ma il background del link (lo stesso vale per un ipotetico boder, etc.) non rispetta le stesse dimensioni (che poi rispecchiano le dimensioni del link stesso)!

Grazie infinite.

[Prill]

Come si può notare l'immagine racchiusa nel link ha le dimensioni, ma il background del link (lo stesso vale per un ipotetico boder, etc.) non rispetta le stesse dimensioni (che poi rispecchiano le dimensioni del link stesso)!

non è chiaro il problema
Parliamo forse di Explorer e dello spazio che vedi al di sotto dell'immagine?
Se è così, questo accade perché l'immagine è un elemento in linea che viene posta sulla base del rigo (e se altri browser in assenza di testo rimuovono quello spazio, Explorer non lo fa)
Per questo può essere risolutivo il display:block, che comporta tuttavia altre implicazioni.
Con ie8 e inferiori è sufficiente allineare l'immagine in basso (vertical-align:bottom), con ie9 non mi pare si sortisca lo stesso effetto se non settando l'allineamento verticale anche sul link

Se non intendevi questo dovrai spiegare meglio, difficilmente troverai sennò che qualcuno risponda

[Igreo]

Io uso Chrome e in pratica se setto nel link un border, ma l'immagine è ad esempio alta 100px, il border risulta essere alto circa 20px, in pratica display:inline. Non posso settare il display:block perchè mi sconvolgerebbe tutto il layout; cos'altro posso fare?

Grazie!

[Prill]

Purtroppo non puoi ottenere il risultato voluto se non trattando il link come un elemento blocco, finché è un elemento in linea avrai il problema che lamenti, cioè che la sua altezza sarà in rapporto alle dimensioni del carattere e non a quella di un altro elemento inline contenuto
Trasformandolo, ti sarà possibile usare sfondi, bordi, margini e padding liberamente e con una resa eguale fra i diversi browser:

nell'esempio ho abbondato con bordi e sfondi

<a href="#" style="padding:30px; background-color:#CCCC66; border:10px solid #FF6633; float:left; display:block"><img src="other_my_img.gif" width="80" height="80" style="padding:20px; background-color:#99CCFF; border:5px solid #0099FF" /></a>

[-Lebowski-]

Prill, tu sei sopra la media, ma io sotto, perchè ho letto più volte la domanda che ha posto Igreo ma non riesco a capire.

Penso che voglia gestire in maniera indipendente le grandezze del link, dell'immagine contenuta in esso e dei rispettivi sfondi, ma non ho capito il risultato finale ideale che vorrebbe raggiungere

questo non va bene?:

<a href="#" style="
background: url('immagine1.png') no-repeat;
background-size: 100% 100%;
border: 2px solid red;
display: block;
width: 300px;
height: 300px;">

<img src="immagine2.png" style="
border: 2px solid yellow;
width: 200px;
height: 200px;
position: relative;
left: 50px;
top: 50px;"/>
</a>

[Prill]

Prill, tu sei sopra la media, ma io sotto, perchè ho letto più volte la domanda che ha posto Igreo ma non riesco a capire.

Penso che voglia gestire in maniera indipendente le grandezze del link, dell'immagine contenuta in esso e dei rispettivi sfondi, ma non ho capito il risultato finale ideale che vorrebbe raggiungere

questo non va bene?:

<a href="#" style="
background: url('immagine1.png') no-repeat;
background-size: 100% 100%;
border: 2px solid red;
display: block;
width: 300px;
height: 300px;">

<img src="immagine2.png" style="
border: 2px solid yellow;
width: 200px;
height: 200px;
position: relative;
left: 50px;
top: 50px;"/>
</a>

@Lebowski, Igreo non voleva fare uso di display:block o inline-block, ma in questa maniera i bordi del link rimanevano al di sotto dell'immagine (prova a vedere cosa accade con un'immagine di 150px, dove il problema sarà più evidente)
Il tuo esempio non va bene perché trasformi il link in blocco (questo genera l'accapo) e ti fermi lì, e poi non ha senso quel position:relative e top e left per l'immagine (se devi centrarla bastano dei margini o padding nel tuo codice essendo il link di dimensioni stabilite - che fra l'altro Igreo non aveva problemi nel centrarla né doveva farlo).

Ma poiché non hai capito la domanda, qual è il senso di questo tuo intervento?

[-Lebowski-]

prill spiegamelo tu cosa voleva fare

[-Lebowski-]

comunque, mentre ci pensi,
dico che il senso del mio intervento è semplicemente di dare una mano per quello che posso

non ho postato il codice per far vedere che centro le immagini,
ma per dare ad Igrao qualche elemento in più per fare delle prove:

chi lo sa se prendendo spunto da quello, magari gli viene un'idea..

Prill visto che sei più brava, secondo me potresti proporgli in metodo con :before

[Prill]

secondo me potresti proporgli in metodo con :before

certo, eccolo, è un metodo raccomandabile universalmente:

:BEFORE speaking once, try to think twice

La pseudo classe before non ci serve in questo contesto in cui il problema è:
avere dei bordi o uno sfondo su un link che ha al suo interno un'immagine e far sì che il collegamento inglobi l'immagine racchiudendola completamente, assumendo in pratica l'altezza del rigo quella che è l'altezza dell'immagine.
Così non avviene se il link non viene trasformato in un elemento blocco (block o inline-block, se usiamo come valore block sarà necessario un float per evitare che il link vada a capo rispetto a quanto lo precede e produca un a capo di quanto lo segue). Spero ora sia chiaro.
Se hai domande al riguardo scrivimi in privato perché abbiamo già sporcato abbastanza questa discussione

[ac_socmel]

Non posso settare il display:block perchè mi sconvolgerebbe tutto il layout; cos'altro posso fare?

mostra questo layout