0
236
ViewsEstablezca la altura a la altura más baja del div hijo hermano
Tengo varias filas, cada fila tiene varias columnas, en cada columna tengo un div + un párrafo, el div incluye una imagen. necesito configurar el div con la clase cover-bg a la altura más baja de cover-bg en la misma fila , la altura calculada de cover-bg en la primera fila no puede tener la misma altura en la segunda fila
<div class="row"> <div class="col-md-4"> <div class="cover-bg"><img src="url"></div> <p>text here</p> </div> <div class="col-md-6"> <div class="cover-bg"><img src="url"></div> <p>text here</p> </div> </div> <div class="row"> <div class="col-md-5"> <div class="cover-bg"><img src="url"></div> <p>text here</p> </div> <div class="col-md-4"> <div class="cover-bg"><img src="url"></div> <p>text here</p> </div> </div>He intentado esto pero establece la altura más baja de todas las filas:
var minHeight = Math.min.apply(null, $('.cover-bg').map(function(){return $(this).height()})); $('.cover-bg').height(minHeight);Tengo problemas para manipular los hermanos () y los niños ()
El problema es cómo separar y establecer la altura para cada fila.
2 answers
Answer question0
Deberá establecer una altura de imagen para cada fila; de lo contrario, todas tendrán la misma altura.
Me confundí un poco con el jquery sugerido, así que aquí hay un fragmento que lo explica en JS puro.
Para cada fila, encuentra la altura mínima de la imagen y luego establece una propiedad de variable CSS de esa fila a esa altura. Esto se usa para diseñar cada una de las imágenes en esa fila en particular.
<!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"> <style> .row { margin-bottom: 20px; } .row .cover-bg img:first-child { height: calc(var(--h) * 1px); } </style> </head> <body> <div class="row"> <div class="col-md-4"> <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/500"></div> <p> weofijae <br/> weofjiawef awoeifj awoefij </p> </div> <div class="col-md-6"> <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/1000"></div> <p>text here</p> </div> </div> <div class="row"> <div class="col-md-5"> <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/300"></div> <p>text here</p> </div> <div class="col-md-4"> <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/200"></div> <p>text here</p> </div> </div> <script> function start() { const rows = document.querySelectorAll('.row'); rows.forEach(row => { const imgs = row.querySelectorAll('img'); let heights = []; imgs.forEach(img => { heights.push(img.height); }); row.style.setProperty('--h', Math.min.apply(null, heights)); }); } window.onload = start; </script> </body> </html>Nota: debe esperar hasta que se carguen las imágenes antes de obtener sus alturas naturales.
Ejecute el fragmento de página completa; de lo contrario, las filas pueden ajustarse.