CODEWITHSUNDEEP
javascripthtmlcss
ayman tarig
ayman tarig

Reputation: 73

How to make the container don't go larger than the screen view

I've been making image matching game, I've two problems, The first one is that The box on the desktop-view give a scroll bar and i want all the box to appear in the screen without need to scroll. The second problem is that how to make the image box have some color and when the user tab on it, it shows the image, here is my cods: 

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>

anyone can help me to do that ?

Upvotes: 1

Views: 599

Answers (3)

Nisharg Shah
Nisharg Shah

Reputation: 19632

first of all your screen view is increasing because of images size, so you can control it by adding class img in that,

Scroll problem

you need to add disply: block and margin: auto for center image.

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 */
}

2nd problem solution

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

that solve your scroll problem

enter image description here

Upvotes: 1

Rahul
Rahul

Reputation: 4374

you need to add below code in your 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;
}

this will get rid of vertical scrollbar and to appear image on click only you just need to add/toggle class clicked on imgs div

this is how it will look

enter image description here

on that clicked class I wrote some css which will work as per your requiremtn

Upvotes: 3

Eric Svitok
Eric Svitok

Reputation: 842

Try setting the height of the container to 100%. This will make it the same height as its parent. 

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

Upvotes: 0

Related Questions