当孩子的身高大于身高时，通过保持比例来缩放孩子(内部有图像)

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>