trovare bambino larghezza dell'immagine e applicarlo alla contenente genitore div jquery
-
02-10-2019 - |
Domanda
Ho un <img>
e alcuni <p>
trova all'interno di un <div>
.
Voglio ottenere la larghezza della IMG bambino e applicarlo alla larghezza del div genitore in modo che i paragrafi di testo andranno a capo alla stessa larghezza della IMG.
Voglio essere in grado di fare questo per più iterazioni sulla stessa pagina.
Sfondo: Sto sviluppando un tema WordPress che utilizza la muratura plugin jQuery ( http://desandro.com/resources/jquery -Lavori in muratura ). Il mio tema ha qualcosa in comune con Gridalicious tema ( http://suprb.com/apps/gridalicious ) ma le larghezze postali e le dimensioni saranno dettate dalla larghezza dell'immagine e non saranno uniformi.
Il mio html / css è immacolata, ma il mio jquery / javascript è piuttosto traballante -. Ma se posso ottenere alcune indicazioni che dovrebbero essere in grado di lavorare con esso
Qualsiasi aiuto veramente apprezzato.
Soluzione
Questo funziona perfettamente. Si noti che è necessario utilizzare $ (window) .load () invece di $ (document) .ready (), perché $ (document) .ready () incendi prima che le immagini vengono caricati, e quindi le immagini non avranno larghezza.
$(window).load(function() {
$('div').each(function() {
$(this).width($(this).find('img').width());
});
});
Modifica Si noti che questo si baserà la larghezza fuori del prima immagine nel div. È sufficiente modificare l'indice ([0]) di basare fuori un'altra immagine nel div.
Modifica. 2: Correzione di Giovanni applicata sulla funzione .width ()
Altri suggerimenti
In questo modo trovare tutti i div sulla pagina e impostare la loro larghezza uguale alla larghezza loro img di elemento secondario.
$('.divselector').attr('width', $(this).find('img').attr('width'))
Non c'è bisogno di usare JavaScript a tutti per questo. Se si mette l'immagine e il p in div bambino, questo può essere fatto esclusivamente nei CSS come nella soluzione di Chris (ecco la JSFiddle: http://jsfiddle.net/glee/qs8GJ/ alla seguente domanda SO: css - ridurre un div genitore per adattare la larghezza di un bambino e vincolare la larghezza della altro bambino
Il trucco è quello di impostare il genitore div a ...
display: table-cell;
l'immagine div a ...
display: table-row;
width: 1px;
... e il div che contiene il testo paragrafo per
display: table-cell;
width: 1px;
funziona come fascino!