限制图像的最大高度，取决于其同级的高度
限制图像的最大高度，取决于其同级的高度
提问于 2018-11-29 03:47:18
如何限制图像的最大高度，使其与其同级图像的高度相同，而不考虑屏幕大小。
可以接受=> Same height - √的结果
一个不可接受的结果，因为图像列的高度超过了它的同级内容(DIV -.main- => )。Not valid one - X
P.S.背景图像属性在这种情况下不适用。
.container {
display: flex;
height: 100%;
}
.container>div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
width: 100%;
height: 100%;
}<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<img src="https://placeimg.com/640/490/nature">
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-11-29 04:01:19
好吧，看起来我可能找到了一个解决方案。一种方法是将图像定位为绝对图像，并在object-fit仍然保持其封面属性的同时“拉伸它”。如果有人有更好的解决方案，请随意分享。
.container {
display: flex;
height: 100%;
=
}
.container > div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
height: 100%;
width: 100%;
}
.sidebar {
position: relative;
}<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<div><img src="https://placeimg.com/640/1000/nature"></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53527021
复制相关文章
相似问题
腾讯云开发者
