我正在开发一个个人资料类型的模板——页面的一半（class="actor-info"）应该显示可滚动的文本和关于一个人的信息，另一半应该由这个人的肖像图片填充。图片应该总是占据屏幕的一半——所以裁剪就可以了。
到目前为止我所拥有的：
- 所有祖先元素设置为高度 100%
- 左列和右列都是弹性框
- 图像容器具有属性
object-fit: cover; - 图像容器具有属性
position:fixed; - 图像高度和宽度设置为
auto
基本上它看起来“好像”它工作正常 - 但是当使用图像更改浏览器窗口时不会采用宽度 - 所以在某些时候肖像不会填充高度。
到目前为止我所拥有的：
<div class="layout">
<div class= "actor-info">
Lorem Ipsum
</div>
<div class="actor-portrait">
<div class="img-container">
<img src="…">
</div>
</div>
</div>
CSS：
html, body, .layout {
width: 100%;
height:100%;
}
.actor-portrait,
.actor-info {
width: 50%;
height:100%;
}
.actor-portrait .img-container {
height:100%;
}
.layout {
align-items: stretch;
display: flex;
width: 100%;
height:100%;
}
.actor-portrait .img-container {
object-fit: cover;
position:fixed;
}
.actor-portrait .img-container img {
width:auto;
height:auto;
}
我希望有人做过这个/以前去过那里吗？所有指针表示赞赏！谢谢！
编辑：我添加了我拥有的“线框”——以及我想要拥有的。图像应始终“覆盖”红色矩形，并且会在矩形（.img-container）处被裁剪。
