我的具体用例是图像滑块，但图像不想留在网格中。
这是我的最新方法：
滑块必须位于容器 div 中，以便可以在网站上四处移动。该容器还在当前显示的大图像下方包含一些小缩略图图像，并限制每个大图像的最大宽度。
它包含一个 div 作为网格，其中包含要滑动的所有图像。它比容器大，因此一次只能看到一张图片。
查看 codepen 以获得更好的理解 -> https://codepen.io/Mr-Law/pen/bGwjqWw
<div id="container">
<div class="big_image" style="--n:7; --i:6;">
<div>
<img src="img1.jpg">
</div>
<div>
<img src="img2.jpg">
</div>
<div>
<img src="img3.jpg">
</div>
<div>
<img src="img4.jpg">
</div>
<div>
<img src="img5.jpg">
</div>
<div>
<img src="img6.jpg">
</div>
<div>
<img src="img7.jpg">
</div>
</div>
<div class="w3-row-padding w3-section">
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(1)">
<img class="preview-image" src="img1.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(2)">
<img class="preview-image" src="img2.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(3)">
<img class="preview-image" src="img3.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
<img class="preview-image" src="img4.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(4)">
<img class="preview-image" src="img5.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(6)">
<img class="preview-image" src="img6.jpg">
</div>
<div class="w3-col demo" style="cursor:pointer" onmouseover="currentDiv(7)">
<img class="preview-image" src="img7.jpg">
</div>
</div>
</div>
#container {
width: 30em;
height: 25em;
overflow-x: hidden;
}
.big_image {
--n: 1;
display: grid;
grid-auto-flow: column;
align-items: center;
width: calc(var(--n) * 100%);
object-fit: contain;
height: 85%;
max-height: 100vh;
}
.big_image img {
width: 100%;
height: 100%;
user-select: none;
pointer-events: none;
transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
transition: transform calc(var(--f, 1) * 0.5s)
cubic-bezier(1, 1.59, 0.61, 0.74);
}
.big_image > div {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.preview-image {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.img-highlight {
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}
.w3-col{
float:left;
width: 11.4%;
height: 3em;
border: 0.1em solid #000;
margin: 0 0.34em;
line-height: calc(3em - 2px);
text-align: center;
}
到目前为止，我尝试了无数变体，但没有解决方案。
答案 0 :(得分：0)
我似乎遇到了一些奇怪的事情，在这里记录一下，以帮助我们找到解决方案。
如果我从问题中的笔中获取代码并在我的 Windows 10 本地 Edge 或 Chrome 上运行它，它表现良好，img 包含在 div 中。如果我从服务器在 web 上运行它也可以，并且可以在 IOS (iPad) 上的 Safari 上运行。但是在 W10 上的 Firefox 上，并在这些系统/浏览器中的任何上运行笔或下面的代码片段，它显示了问题中描述的问题。
我尝试在 iframe 中运行代码，因为 SO 代码段系统会这样做以查看是否会导致问题，但它在 Edge/Chrome 和 Safari 上运行良好。此外，我还明确设置了字体大小在身体的情况下，这导致了问题，但这些并没有改变行为。我已经通过 W3C 验证器运行了代码，该验证器只反对 imgs 上缺少 alt 属性。
我很难过，希望有人能对此有所了解。
detox-cliconst dots = document.getElementsByClassName("demo");
const _C = document.querySelector(".big_image"),
N = _C.children.length;
var slider_i = 0;
let x0 = null,
locked = false,
w;
function unify(e) {
return e.changedTouches ? e.changedTouches[0] : e;
}
function lock(e) {
x0 = unify(e).clientX;
_C.classList.toggle("smooth", !(locked = true));
}
function drag(e) {
e.preventDefault();
if (locked)
_C.style.setProperty("--tx", `${Math.round(unify(e).clientX - x0)}px`);
}
function move(e) {
if (locked) {
let dx = unify(e).clientX - x0,
s = Math.sign(dx),
f = +((s * dx) / w).toFixed(2);
// if not at left or right end and f is bigger .2
if ((slider_i > 0 || s < 0) && (slider_i < N - 1 || s > 0) && f > 0.1) {
dots[slider_i].classList.remove("img-highlight");
_C.style.setProperty("--i", (slider_i -= s));
dots[slider_i].classList.add("img-highlight");
f = 1 - f;
}
_C.style.setProperty("--tx", "0px");
_C.style.setProperty("--f", f);
_C.classList.toggle("smooth", !(locked = false));
x0 = null;
}
}
function showDivs(n) {
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove("img-highlight");
}
slider_i = slideIndex - 1;
_C.style.setProperty("--i", slider_i);
dots[slideIndex - 1].classList.add("img-highlight");
}
function size() {
w = window.innerWidth;
}
size();
_C.style.setProperty("--n", N);
addEventListener("resize", size, false);
_C.addEventListener("mousedown", lock, false);
_C.addEventListener("touchstart", lock, false);
_C.addEventListener("mousemove", drag, false);
_C.addEventListener("touchmove", drag, false);
_C.addEventListener("mouseup", move, false);
_C.addEventListener("touchend", move, false);
window.document.getElementsByClassName("demo")[0].classList.add("img-highlight");
function currentDiv(n)
{
showDivs(slideIndex = n);
}#container {
width: 30em;
height: 25em;
overflow-x: hidden;
}
.big_image {
--n: 1;
display: grid;
grid-auto-flow: column;
align-items: center;
width: calc(var(--n) * 100%);
object-fit: contain;
height: 85%;
max-height: 100vh;
}
.big_image img {
width: 100%;
height: 100%;
user-select: none;
pointer-events: none;
transform: translate(calc(var(--tx, 0px) + var(--i, 0) * -100%));
}
.smooth {
transition: transform calc(var(--f, 1) * 0.5s)
cubic-bezier(1, 1.59, 0.61, 0.74);
}
.big_image > div {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.preview-image {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.img-highlight {
-webkit-box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 5px, #ff8000 0 -10px 10px, 5px 5px 4px 5px rgba(0,0,0,0);
box-shadow: #FFF 0 -1px 4px, #ff0 0 0 5px, #ff8000 0 0 10px, 5px 5px 4px 5px rgba(0,0,0,0);
}
.w3-col{
float:left;
width: 11.4%;
height: 3em;
border: 0.1em solid #000;
margin: 0 0.34em;
line-height: calc(3em - 2px);
text-align: center;
}