Creé una pequeña galería que se ajusta automáticamente al tamaño de la ventana, pero el script obviamente necesita el tamaño de ventana correcto para calcular los tamaños de imagen.

En teoría, es fácil obtener el ancho con .offsetWidth, .scrollWidth, .clientWidth o window.innerWidth pero, por alguna razón, Safari devuelve el ancho incorrecto cada vez. En Firefox se ejecuta sin problemas. Según W3Schools, todas estas funciones funcionan en todos los tipos de navegador.

Sé que esta pregunta surgió antes: Safari está devolviendo el valor de ancho incorrecto, pero no había solución en ese momento.

Mi Script: (tal vez me he equivocado)

 const body = document.querySelector('body') const row = body.offsetWidth //one row is has the width of the parent elemenet (body) const item = document.getElementsByClassName('gallery-item') window.onload = function () { let columnAmount = 3 //amount of columns the gallery have let imgMargin = 1.5 //half the gap size between images let gaps = columnAmount + 1 //how many gaps are in a row let imgRowSpace = row - (imgMargin * 2 * gaps) //how many space is left for images let imgSize = imgRowSpace / columnAmount //how large is one image for(var i = 0; i < item.length; i++) { //change the properties item[i].style.height = imgSize + 'px' item[i].style.width = imgSize + 'px' item[i].style.margin = imgMargin + 'px' } body.setAttribute('style', 'padding: ' + imgMargin + 'px') }

Espero que alguno de vosotros tenga más conocimientos que yo.