CSS：如何在响应式 50% 宽度上下文中显示图像 object-fit:cover？
CSS: how to display an image object-fit:cover in a responsive 50% width context?
我正在制作个人资料类型的模板 – 页面的一半 (class="actor-info") 应该显示可滚动的文本和关于一个人的信息，另一半应该被填充由人的肖像图片。图片应始终填满屏幕的一半 - 所以裁剪就可以了。
我目前拥有的：
- 所有祖先元素设置为高度 100%
- 左栏和右栏都是弹性框
- 图像容器具有 属性
object-fit: cover;
- 图像容器具有 属性
position:fixed;
- 图片高宽设置为
auto
基本上它看起来 'as if' 它工作正常 – 但是当改变浏览器时 window 图像不适应宽度 – 所以在某些时候肖像不填充高度.
我目前拥有的：
<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;
}
我希望有人做过这个/以前去过那里吗？所有指针表示赞赏！谢谢！
编辑：我添加了 'wireframe' 我拥有的和我想要的。图像应该始终 'cover' 红色矩形，并且会被裁剪成矩形 (.img-container)。
我实际上在网站上做了类似的事情，但我也有一个固定的侧边导航要处理：polarlab.anchoragemuseum.org。
我不记得我最初是在哪里找到这段代码的，但诀窍是图像上的 css。我稍微调整了标记和 css 以适应固定图像。
这里也有一个fiddle供参考。
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>
当您使用预定义的宽度和高度时，您可以大大简化代码并使用 background 和 background-size: cover 来实现。
堆栈片段
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
如果您需要在标记中设置图片来源，您也可以这样做。
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
如果您仍想使用 object-fit: cover 也可以，尽管它的浏览器支持少于 background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>
我正在制作个人资料类型的模板 – 页面的一半 (class="actor-info") 应该显示可滚动的文本和关于一个人的信息，另一半应该被填充由人的肖像图片。图片应始终填满屏幕的一半 - 所以裁剪就可以了。
我目前拥有的：
- 所有祖先元素设置为高度 100%
- 左栏和右栏都是弹性框
- 图像容器具有 属性
object-fit: cover; - 图像容器具有 属性
position:fixed; - 图片高宽设置为
auto
基本上它看起来 'as if' 它工作正常 – 但是当改变浏览器时 window 图像不适应宽度 – 所以在某些时候肖像不填充高度.
我目前拥有的：
<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;
}
我希望有人做过这个/以前去过那里吗？所有指针表示赞赏！谢谢！
编辑：我添加了 'wireframe' 我拥有的和我想要的。图像应该始终 'cover' 红色矩形，并且会被裁剪成矩形 (.img-container)。
我实际上在网站上做了类似的事情，但我也有一个固定的侧边导航要处理：polarlab.anchoragemuseum.org。
我不记得我最初是在哪里找到这段代码的，但诀窍是图像上的 css。我稍微调整了标记和 css 以适应固定图像。
这里也有一个fiddle供参考。
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>
当您使用预定义的宽度和高度时，您可以大大简化代码并使用 background 和 background-size: cover 来实现。
堆栈片段
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
如果您需要在标记中设置图片来源，您也可以这样做。
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
如果您仍想使用 object-fit: cover 也可以，尽管它的浏览器支持少于 background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>