Question

我一直在做图像匹配游戏，有两个问题，第一个是桌面视图上的框提供滚动条，我希望所有框都出现在屏幕上而无需滚动。第二个问题是如何使图像框具有某种颜色，并且当用户在其上的选项卡上显示图像时，这是我的编码：

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>

CASE

任何人都可以帮助我做到这一点吗？

Answer 1

您需要在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;
}

这将摆脱垂直滚动条，仅在单击时显示图像，您只需要在clicked div上添加/切换类imgs

这就是它的样子

在该clicked类上，我编写了一些CSS，这些CSS将根据您的requiremtn工作

Answer 2

首先，由于图像大小，屏幕视图会增加，因此您可以通过在其中添加类img来控制它，

滚动问题

您需要为中心图像添加disply: block和margin: auto。

HTML

<img class="img-fluid img" src="Apple.jpg" alt="image">

CSS

img {
    height: 200px;  /* you can set height by your perspective */
    display: block;
    margin: auto;
    opacity: 0; /* add for your second problem */
}

第二个问题解决方案

$('.col-3 img').click(function() {
   $(this).css('opacity',1);
})

可以解决滚动问题

Answer 3

仅当视口高度小于容器高度时，您的项目才会显示滚动条。您是否尝试过以100vh调整CSS的高度并溢出：隐藏？

Answer 4

尝试将容器的高度设置为100％。这将使其与父代的高度相同。

<div class="container" style="height:100%">

如何使容器不超过屏幕视图

4 个答案: