Масштабируйте ребенка (с изображением внутри), сохраняя соотношение, когда его рост больше высоты партера

Question

У меня есть код ниже.

Моя проблема в том, что когда изображение больше родительской высоты, оно уменьшается по высоте, но не по ширине.

Я хочу, чтобы изображение масштабировалось и сохранило его соотношение.Например, изображения размером 150x150 и 100X100 не являются квадратными.

.container{
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
}

.items {
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    position: relative; 
    margin: 2px;
    }
.item {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 2px;
}
   
.item > * {
      cursor: pointer;
      display: flex;
      max-height: 100%; }
      
.item img {
      display: block;
      max-height: 100%; }

<div class="container">
<div class="items">
<div class="item" >
  <a href="#"><img src="https://via.placeholder.com/150">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/50">
</a>
</div>
</div>
</div>

Answer 1

Я вырубил много ваших css, потому что нашел много из них избыточными.

.container{
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
}

.items 
{
    left: 0;
    top: 0;
    display: flex;
    height: 60px;
    flex-direction: row;
    padding: 0.5rem 0;
    position: relative; 
    margin: 2px;
}
.item 
{
    margin: 2px;
    height:100%;
}
   
.item img
{
      cursor: pointer;
      max-height: 100%;
      width:auto;
}

<div class="container">
<div class="items">
<div class="item" >
  <a href="#"><img src="https://via.placeholder.com/150">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/100">
</a>
</div>
<div class="item" >
  <a href=""><img src="https://via.placeholder.com/50">
</a>
</div>
</div>
</div>