我有下面的代码。
我的问题是,当图像大于父级高度时,它会按高度缩小,但不会按宽度缩小。
我希望图像缩放并保持其比例。例如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>
答案 0 :(得分: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>