Quiero mostrar las imágenes cargadas en un div, deben mantener su ancho y alto y el espacio entre ellas y deben poder desplazarse horizontalmente si se desborda el div
document.querySelector("#files").addEventListener("change", (e) => { if (window.File && window.FileReader && window.FileList && window.Blob) { const files = e.target.files; const output = document.querySelector("#result"); const div = document.createElement("ul"); for(let i = 0; i < files.length; i++){ if (!files[i].type.match("image")) continue; const picReader = new FileReader(); picReader.addEventListener("load", function(event) { const picFile = event.target; const div = document.createElement("div"); div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`; output.appendChild(div); }) picReader.readAsDataURL(files[i]); } } else { alert("Your browser does not support File API") } }) #result { display: flex; margin-top: -60px; margin-left: 70px; height: 65px; background-color: yellow; width: 80%; overflow-x:auto; overflow-y:hidden; } .thumbnail { height: 60px; width: 60px; border-radius: 6px; } <div id="result"> </div>
#container { /* change the height of the parent, it will automatically change the height of images and buttons */ --height: 15vw; /* 12px is the default height of scrollbar (at least in chrome), but I added some pixel to make sure that it will be working also in Firefox etc... you can change it manually here or...*/ /* you can also change this value using javascript https://stackoverflow.com/questions/28360978/css-how-to-get-browser-scrollbar-width-for-hover-overflow-auto-nice-margi */ /* we will use this css var inside line 35 CSS (#result .thumbnail) */ --scrollBarHeight: 15px; border: 1px solid red; /* button (auto width) #result (all space) */ display: grid; grid-template-columns: auto 1fr; /* gap between buttons and #result, change it if you want */ gap: 1rem; } #container button { /* square button */ height: var(--height); width: var(--height); /* font-size auto sized by the height of button */ font-size: calc(var(--height) / 1.5) } #result { height: var(--height); /* displayed one near the other */ display: flex; gap: 0.5rem; /* active a scrollbar */ overflow-x: scroll; } #result .thumbnail { /* solving bug: "scrollbar on top the images" */ height: calc(var(--height) - var(--scrollBarHeight)); /* make image not stretch css */ object-fit: cover; } <!-- this is a example --> <div id="container"> <!-- plus button --> <button>+</button> <!-- parent where there is the images --> <div id="result"> <!-- 1 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 2 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 3 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 4 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 5 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 6 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 7 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 8 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 9 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> <!-- 10 --><img class="thumbnail" src="https://picsum.photos/500" alt=""> </div> </div>Simplemente agregue una propiedad de gap al div #result . Y agregue flex-shrink:0; al contenedor div de la etiqueta .thumbnail img.
La razón es que flexbox reducirá por defecto todos sus elementos secundarios para envolverlos en una sola línea. Así que no importa su tamaño, solo les dará el tamaño que le permitirá encajarlos en una sola línea.
const picFile = event.target; const div = document.createElement("div"); div.className="thumbnail-container" div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`; output.appendChild(div); #result { display: flex; margin-top: -60px; margin-left: 70px; height: 65px; background-color: yellow; width: 80%; gap:20px; overflow-x:auto; overflow-y:hidden; } .thumbnail { height: 60px; width: 60px; border-radius: 6px; } .thumbnail-container{ flex-shrink:0; }