Changing image sizes proportionally using CSS?

Question

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to,

Answer 1

This help me to make the image 150% with ease.

.img-popup img {
  transform: scale(1.5);
}

Answer 2

if you know the spect ratio you can use padding-bottom with percentage to set the hight depending on with of the diff.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

Answer 3

transform: scale(0.5);

---

Example:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

see: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale