Question 43069 in Html Question posted in
Some basic documentation can be found here.

How to resize images in a JavaScript app? – Html

I am setting myself a task for musical rhythm practice to show 4 cards on a website that change every 4 seconds. It is all working however I just cannot make them smaller. I tried uploading smaller cards and tried various JavaScript snippets but nothing works.

I just need 4 little cards in a row, not 4 big cards one on top of the other.

I tried uploading smaller cards, tried changing size using JavaScript, but can’t get anything to work. Here is what I have so far. (I haven’t included any scripts for changing size that didn’t work).

var card1Image;
var card2Image;
var card3Image;
var card4Image;

function start() {
  var button = document.getElementById("startButton");
  button.addEventListener("click", pickCards, false);
  card1Image = document.getElementById("card1");
  card2Image = document.getElementById("card2");
  card3Image = document.getElementById("card3");
  card4Image = document.getElementById("card4");
}

function pickCards() {
  setImage(card1Image);
  setImage(card2Image);
  setImage(card3Image);
  setImage(card4Image);
}

function setImage(cardImg) {
  var cardValue = Math.floor(1 + Math.random() * 25);
  cardImg.setAttribute("src", "https://timpratt.uk/wp-content/uploads/2023/04/card" + cardValue + ".png");
}
window.addEventListener("load", start, false);

setInterval(pickCards, 4000);
.table {
  position: relative;
  top: 50px;
  left: 50px;
  width: 1700px;
  height: 800px;
  background-color: white;
}

.key {
  position: absolute;
  top: 15px;
  left: 50px;
}

.startButton {
  width: 80px;
  height: 50px;
  background-color: black;
  color: white;
}

.card {
  position: absolute;
  top: 150px;
  left: 150px;
  max-width: 8px!important;
  max-height: 8px!important;
}
<meta charset="utf-8">
<title>Rhythm Practice</title>

<div class="table">
  <div class="key">
    <form action="#">
      <p><input id="startButton" type="button" value="start"></p>
    </form>
  </div>
  <div class="card">
    <p><img id="card1" src="https://timpratt.uk/wp-content/uploads/2023/04/intro1.png">
      <img id="card2" src="https://timpratt.uk/wp-content/uploads/2023/04/intro2.png">
      <img id="card3" src="https://timpratt.uk/wp-content/uploads/2023/04/intro3.png">
      <img id="card4" src="https://timpratt.uk/wp-content/uploads/2023/04/intro4.png">
    </p>
  </div>

</div>
Tags:

2

Answers


  1. 0

    To make the cards smaller, you can adjust the width and height of the ".card" class in your CSS. Currently, the max-width and max-height properties are set to 88px, which is making the cards appear large. You can reduce these values to make the cards smaller. For example, try changing the ".card" class in your CSS to the following:

    .card {
  position: absolute;
  top: 150px;
  left: 150px;
  max-width: 50px;
  max-height: 50px;
}

    This should make the cards appear smaller. You can adjust the max-width and max-height values as per your requirement.

    Also, it’s worth noting that the position of the cards is absolute, which means they will always be positioned relative to the top-left corner of the nearest positioned ancestor element. In your case, it’s the ".table" class. So, you may want to adjust the left and top values of the ".card" class to align the cards as per your requirement.

    Login or Signup to reply.
  2. 0

    The width and height properties you set in the .card only applies to the div whose class attribute is equal to .card (div.card). Since images have their own natural dimensions they will usually try to render their own sizes even if they overlap or go beyond the boundaries of their parent element, unless we tell them specifically what should be their dimensions using CSS.

    I would suggest that you have to be more specific in defining their style:

    .card img {
     max-width: 50px; 
     max-height: 50px; 
}

    The !important is not really necessary if we want to improve the style’s specificity.

    Regarding why they are stacking on top of each other, the images’ parent container (div.card) is much smaller, so each images will try to "squeeze out" of the container and position itself below its previous sibling. I would actually change the style for div.card to:

    .card {
  position: absolute;
  top: 150px;
  left: 150px;
}

    Here’s a fiddle with your code and the suggestions I mentioned: https://jsfiddle.net/ku0sqc6d/

    Btw, in the real world we always want to resize the images we are using as close to the largest size we would display them, to save network resources and in general improve loading times. Imagine using a 1MB file for each images but we would only use them as icons in a 32px squares!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search