我一直在制作图像匹配游戏，我有两个问题，第一个是桌面 View 上的框有一个滚动条，我希望所有的框都出现在屏幕上而不需要滚动。第二个问题是如何让图像框有一些颜色，当用户点击它时，它会显示图像，这是我的代码:
const makeImagesWork = () => images.forEach((name, i) => images[i] = `https://loremflickr.com/420/420?lock=${(i + 1) % 2 + i}&random=${name}`);
const box = document.getElementById('box');
images = ["Apple.jpg", "Apple.jpg", "Orange.jpg", "Orange.jpg", "Cake1.jpg", "Cake1.jpg", "Car.jpg", "Car.jpg", "House1.jpg", "House1.jpg", "Cake2.jpg", "Cake2.jpg", "House2.jpg", "House2.jpg", "Cake4.jpg", "Cake4.jpg"];
makeImagesWork(); // for testing
l = images.length;
let output = '';
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
images = shuffle(images);
for (var i = 0; i < l; i++) {
output += `<div class="col-3 imgs">
<img class="img-fluid" src=${String(images[i])} alt="image">
</div>`
}
box.innerHTML = output;html,
body {
height: 100%;
}
.imgs {
border: 2px solid rgb(199, 27, 27);
}<html>
<head>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- External CSS-->
<link rel="stylesheet" href="style.css">
<title>Match Images</title>
</head>
<body>
<div class="container">
<div class="row" id="box">
</div>
</div>
<!-- Bootsrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>谁能帮我做到这一点？
最佳答案
你需要在你的css中添加下面的代码
.imgs > img {
max-width: 100%;
max-height: 80%;
z-index: -1;
position: relative;
margin-top: 6px;
}
.imgs {
text-align: center;
height: 24vh;
background-color: #ddd;
}
.imgs.clicked > img {
z-index: 0;
}
.imgs.clicked {
background-color: #fff;
}
这将摆脱垂直滚动条，只需要在 imgs div 上添加/切换类 clicked 即可在点击时显示图像
这就是它的样子
在那个 clicked 类上，我写了一些 css，它会按照你的要求工作
关于javascript - 如何使容器不超过屏幕 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54422745/