Question

我正在研究一种类型的模板 - 一半的页面（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）。

Answer 1

我实际上在网站上做了类似的事情，但我也有一个固定的侧面导航来处理：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>

Answer 2

当您使用预定义的宽度和高度时，您可以大量简化代码并使用background和background-size: cover来完成此操作。

Stack snippet

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>

CSS：如何显示图像对象：覆盖在响应性50％宽度的上下文中？

2 个答案: