使flex div与图像相适应以“倍于折叠”

Question

我有以下使用flex制作的布局。

.flexcontainer {
  display: flex;
  flex-direction: column;
}

.subcontainer1 {
  display: flex;
  flex-direction: row;
}

.subcontainer2 {
  display: flex;
  flex-direction: row;
}

.subcontainer1 .avatar {
  flex: 1 0 5%;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.media img {
   max-width: 100%;
   max-height: 100%;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="https://pbs.twimg.com/media/Doc_24PWsAAnx5w.jpg"/>
    </div>
  </div>
</div>

如您所见，我将图像尺寸设置为适合div：

max-width: 100%;
max-height: 100%;

但是这样做是为了使包含图像的div在屏幕外生长，而不是停留在页面的“折叠上方”部分（换句话说，用户在第一个屏幕中看到的内容）。

如果您运行摘要或打开我的CodePen link，则在两种情况下都可以看到图像适合div，但div不在折叠部分上方。

我想让div不在屏幕下方，而让图像具有div的大小，而不是相反。

由于图像是动态加载的，是否可以使用HTML和CSS做到这一点？

Answer 1

我不确定我是否正确理解了您的问题，但这就是我会做的：

.flexcontainer {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.subsubcontainer {
  display: flex; 
  flex-direction: row;
}

.subcontainer1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
}

.subcontainer2 {
  display: flex;
  flex-direction: row;
}

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.media img {
   max-width: 100%;
   max-height: 100%;
}

<div class="flexcontainer">
  <div class="subcontainer1">
   <div class="subsubcontainer">
      <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
      <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    </div>
   
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="https://pbs.twimg.com/media/Doc_24PWsAAnx5w.jpg"/>
    </div>
  </div>
</div>

CodePen Link

我删除了flex-basis值，该值会导致容器垂直滚动（而不是图像），并向第一个子容器添加了一些不同的结构以正确定位而未提供明确的尺寸

Answer 2

我想到的唯一解决方案是将图像转换为div的背景，然后在容器上使用align-items: stretch。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  margin-left: 2px;
  margin-right: 2px;
}

.flexcontainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.subcontainer1 {
  display: flex;
  flex-direction: row;
}

.subcontainer2 {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.subcontainer1 .avatar {
  flex: 1 0 5%;
  width: 73px;
  height: 73px;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
  height: 100%;
}

.subcontainer2 .media {
  flex: 1 0 0;
  height: 100%;
  width: 30%;
  background-image: url('http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.media img {
  height: auto;
  width: auto;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">

    </div>
  </div>
</div>

https://codepen.io/valepu/pen/WawzPz

Answer 3

从@valepu答案开始，我无需使用background-image CSS属性内联即可达到相同的结果。 我将img标记保留为问题中的代码，并使用object-fit和object-position CSS属性使其以相同的方式工作：

HTML：

<div class="media">
  <img src="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/>
</div>

CSS：

.subcontainer2 .media img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
}

这里有完整的摘要：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flexcontainer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.subcontainer1 {
  display: flex;
  flex-direction: row;
}

.subcontainer2 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.subcontainer1 .avatar {
  flex: 1 0 5%;
}

.subcontainer1 .user {
  flex: 1 0 80%;
}

.subcontainer1 .time {
  flex: 1 0 10%;
}

.subcontainer2 .text {
  flex: 2 0 0;
}

.subcontainer2 .media {
  flex: 1 0 0;
}

.subcontainer2 .media img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: top;
}

<div class="flexcontainer">
  <div class="subcontainer1">
    <div class="avatar">
      <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
    </div>
    <div class="user">
      <div class="title">Sue Smith</div>
      <div class="subtitle">PincoPallino</div>
    </div>
    <div class="time">
      15th August 2017
    </div>
  </div>
  <div class="subcontainer2">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
    </div>
    <div class="media">
      <img src="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/>
    </div>
  </div>
</div>