如何解决div包装纸的最小宽度
我与物品行。每个项目都包含一个标题,图像和按钮。图像保持其纵横比。 我不明白为什么包装器会添加空白空间。
沙箱: https://codepen.io/krosert/pen/QWNNVxg
现在的结果:
预期结果:
代码:
<div class="panel">
<div class="item">
<span class="title">first item</span>
<img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="item">
<span class="title">second item</span>
<img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
</div>
.panel{
position: fixed;
background-color: #685;
top: 30px;
height: 200px;
display: flex;
width: 100%;
}
.item{
margin: 6px;
border: 2px solid black;
background-color: #553;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 0 5px;
max-width: 300px;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
min-height: 0;
min-width: 0;
}
解决方法
删除align-items: flex-start;
并添加object-fit: cover; object-position: top;
到img
删除此行:
.items {
align-items: flex-start;
}
您正在执行的操作是告诉items元素将图像推送到其父容器列的开头。将其余宽度留为空白。
要解决图像尺寸超出其容器的问题,请为.items div设置最大高度:
.items{
max-height: 95%;
}
然后将图像的高度设置为不会超过导致图像溢出的高度:
img {
max-height: 140px;
object-fit: contain;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。