CSS image in percentage sized container

Issue

I have the following code:

https://codepen.io/rctneil/pen/NWwGQyr?editors=1100

Basically my issue revolves around the .card-logo elements.

I will be putting a variety of logo images in this location. I need them to be a maximum width of 50% of the parent card and a maximum height of 50% of the width of the parent card.

That itself wouldn't be too difficult, but I also need them to be less than that if the aspect of the image requires it. Eg, if it's a portrait image then the height should be 50% of the width of the card but the width of the logo needs to just be whatever it ends up being naturally.

Any ideas?

Solution

Here is my solution : https://codepen.io/Woralie/pen/dyZvzRP

You'll need to add a container for each logo image.

  .card-logo {
    position: absolute;
    display: block;
    max-width: 50%;
    max-height: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: white;
  }

  .card-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -25%;
    margin-bottom: 0.75rem;
    padding: 25%;
    min-width: 100%;
  }

The trick is to make the container position: relative with padding: 25% and the image position: absolute with max-width: 50%. The container's top and bottom paddings take 2*25% of the total width, so when its height is 0, the image's height at max-height: 100% takes a maximum of 50% of the container's total width.

Answered By - cpapillon