jquery/javascript: ¿cuándo obtener el tamaño de div del contenedor correcto?
<div> <div class="container"> <div class="slider"> <img src="image1.jpg"> <img src="image2.jpg"> </div> <div> </div> |container----| --------------Slider-------- |image1 | image2 | -----------------------------¿Cuál es el momento adecuado para obtener el ancho del contenedor y establecer el ancho de la imagen al ancho del contenedor?
Intentó
$(document).ready(function() { var width = $(".container").width(); $("img").css("width", width + "px"); });El ancho es diferente cada vez que se recarga la página, por ejemplo, 524, 1449, 1920
el valor correcto es 524.
Al depurar el código, obtenga siempre el valor correcto 524. El motivo podría ser que el contenedor div se represente por completo durante el modo de depuración (se detuvo en el punto de interrupción).
Es difícil saber por qué el ancho cambia según su código... Así que publiqué 3 soluciones. Editar: después de leer sus comentarios, creo que la solución 2 es lo que está buscando.
La solución simple debería ser establecer el ancho de la imagen en 100vw en css así: #img {width=100vw}
Por lo general window.onload = () => {} funcionará. He aquí por qué:
carga de imagen frente a carga DOM
Parece que el tiempo de carga de la imagen podría afectar el tamaño de su contenedor. Cuando se usa ready , el código se inicia antes de esperar a que se carguen las imágenes. Luego, su código se ejecuta antes de que las imágenes tengan su ancho 'verdadero'. deberías usar $(window).on("load", handler)
Con jQuery, usa
$(document).ready()para ejecutar algo cuando se carga el DOM y$(window).on("load", handler)para ejecutar algo cuando todas las demás cosas también están cargadas, como el imágenes
Explicación completa por paxdiablo
Esta es una especie de solución 'pirateada', aunque si todo lo anterior no funciona, podría funcionar para usted (es general, ya que no estoy seguro de qué causa los cambios de ancho en su código). Suponiendo que no desea que el tamaño del contenedor siga cambiando siempre, sino solo después de la carga. Puede escuchar los cambios durante un tiempo limitado y luego desactivarlos:
const resize_ob = new ResizeObserver((entries) => { let rect= entries[0].contentRect; let width = rect.width; // here you can select all of its image children and adjust their size }); let myDiv=window.getElementById("container") resize_ob.observe(myDiv)Luego, puede desactivar este detector de eventos después de un tiempo, o cuando el usuario interactuó con su página de alguna manera:
//end resize observation resize_ob.unobserve(myDiv);Ver ejemplo detallado aquí . Tenga en cuenta que es hacky, y como mencionó cesare-polonara :
probablemente conducirá a comportamientos extraños utilizados de esa manera, ya que no escuchará el cambio de ancho realizado mediante programación