div中的图像会变得狭窄，无法滚动

Question

我想在div中显示上传的图像，它们应该保持它们的宽度、高度和间距，并且如果溢出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>

电流输出

Answer 1

#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>

Answer 2

只需向#resultdiv添加一个gap属性。然后将flex-shrink:0;添加到.thumbnailimg标记的包装器div中。

原因是flexbox默认情况下会收缩其所有子项以将其包裹在一行中。因此，无论它们的尺寸如何，它都只会给它们一个尺寸，使其能够将它们放在一条线上。

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;
}