Question

从this question开始，我创建了以下布局：

html, body {
  height: 100%;
}

.flexcontainer {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.left-container {
  flex: 3 0 0;
}

.left-container .header {
  display: flex;
}

.right-container {
  flex: 1 0 0;
}

.right-container img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: top right;
}

<div class="flexcontainer">
  <div class="left-container">
    <div class="header">
      <div class="avatar">
        <img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/>
      </div>
      <div class="user">
        <span class="title">Sue Smith</span>
        <div class="subtitle">PincoPallino</div>
        <div class="time">15th August 2017</div>
      </div>
    </div>
    <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>
  <div class="right-container">
    <img src="http://www.fulltimefba.com/wp-content/uploads/2014/04/bigstock-obstacle-ahead-caution-for-dan-41515888.jpg"/>
  </div>
</div>

（{CodePen镜像）。

我想让右边的图像适合 fold 部分，甚至还应加上一些填充。如您所见，它不能显示垂直的滚动条。

我如何使图像适合折痕？

如果我将padding的{{1}}和margin设置为body，则可以正常工作，并且摆脱了垂直滚动条。但是...这不是一个肮脏的解决方案吗？

如何在不使用垂直滚动条的情况下使图像适合“折叠”

0 个答案: