Tengo tal vez 30 de estos pines:
<div class="pin"> <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" /> <h2>Title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="#">Read More...</a> </div> Y estoy tratando de configurar cada ancho de .pin igual que el .blog-img . ¿Cómo haría esto cuando cada uno de los 30 pines va a ser único en tamaño?
Estoy abierto a usar jquery.
Editar: para aclarar este proyecto, estos mosaicos se generarán desde un back-end con JSON y en el front-end usando EJS. Así que esto tiene que ser dinámico.
Criterios: debe poder usar display flex en el contenedor principal.
¡Gracias!
Con CSS puedes hacer esto:
.pin { display:table; width:1%; background:gray; } <div class="pin"> <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" /> <h2>Title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="#">Read More...</a> </div>Algo como esto debería hacer el truco
$('.pin').each(function(){ var w = $(this).children('.blog-img').width(); $(this).width(w); $(this).animate({opacity:1}, 1000); }); .pin { opacity: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pin"> <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" /> <h2>Title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="#">Read More...</a> </div> Editar: para que el cambio sea menos discordante, comience con los elementos ocultos usando opacity: 0; luego desvanécelos usando animate()
Si quieres usar jQuery entonces
$(function(){ $.each($('.pin'), function(){ $(this).width( $('.blog-img').first().width()); }); });Lo haría.