CSS positioning for two images put one on another in a card z-index but the images are coming out of card div

Question

while I am trying to insert the two images one on another using z-index in a card but after using this css properties like the images is coming out of the card.So that I am unable to use the card properties help to solve this

<div class=" card iphone col-md-12 col-lg-6  ml-auto pt-3">
            <img src="../../../assets/iphone screen.png" class="iphone1 cards" alt="">
            <img src="../../../assets/mobile_screenshot.png" class="mobile cards" alt="" height="400px" width="190px">
        </div>

.card {
  height: fit-content;
  width: fit-content;
 .cards {
    height: 400px;
    width: 200px;
    border: 1px solid #000;
    position: absolute;
  }

  .iphone1 {
    width: 570px;
    height: 560px;
    top: 10px;
    border: none;
    right: 5px;
    z-index: 1;
  }

  .mobile {
    border: none;
    border-radius: 10px;

    top: 90px;
    right: 190px;
    z-index: 2;
  }
}

I want to set the two images one on another within the card so that I can use card properties.

Answer 1

you are giving height to the .cards , instead give height and width to the wrapper i.e the .card IN PIXELS , then set the .cards to width 100% and height 100%. This way, both images will be set according the the size of the card.

Other than that, if you want one image to look bigger, don't use sizes in pixels, use the % values i.e height 150% on one .card will make it 1.5 times bigger than the height of the .card that you initially set in pixels.

Feel free to use the comment section!