javascript - 使图像填充剩余的垂直空间，不滚动

Question

我有一个包含标题、段落和单个图像的页面，它们的大小/纵横比可能非常不同。

我希望图像能够适应，以便它要么填充最大可用高度，要么受其宽度限制，而不会丢失纵横比，也不会导致滚动。

这是我的基本配置:

angular.module("myApp", ["ngMaterial"]);

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>

<div ng-app="myApp" layout="column" layout-fill> 
  <div flex style="background: red;">
    <h1>Title</h1>
    <p>Details. Blablabla.</p> 
  </div>
  <div flex="60" style="background: blue;" object-fit="fill">
    <img id="myImg" ng-src="http://placehold.it/200x400"/>
    <!-- Should work with such extreme case as well -->
    <!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
  </div>
</div>

我看过很多 SO 帖子、网站、博客等。我不知道从哪里开始才能完成这项工作。大多数关于流体图像或响应图像的文章只讨论可滚动的网页。因此，即使是关于该主题的良好引用也会有所帮助。谢谢。

编辑:更新片段以使用 flex layout .如您所见，图像超出了蓝色 div 边界。我使用了 object-fit="content"; 或 object-fit="fill"; 但似乎都没有限制图像遵守 div 边界

Answer 1

可以通过object-fit来完成( it doesn't support IE ) 和 CSS calc (it supports most of broswer)。

What did you do?

我用 div(.wrapper) 包裹图像，用 css calc 计算它的高度。

height: calc(100vh - 19px - 38px); //100% of viewport - height of p - height of h1

然后使用object-fit 将图像调整到.wrapper 的高度，保持图像的比例。

图片来自高空

angular.module("myApp", ["ngMaterial"]);

h1,
p {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 100%;
  height: calc(100vh - 19px - 38px);
}
img {
  object-fit: fill;
  height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>

<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
  <h1>Title</h1>
  <p>Details. Blablabla.</p>
  <div class="wrapper">
    <img id="myImg" ng-src="http://placehold.it/200x400" /> 
    <!-- Should work with such extreme case as well -->
    <!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
  </div>
</div>

图片由 less height 提供

angular.module("myApp", ["ngMaterial"]);

h1,
p {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 100%;
  height: calc(100vh - 19px - 38px);
}
img {
  object-fit: fill;
  height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>

<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
  <h1>Title</h1>
  <p>Details. Blablabla.</p>
  <div class="wrapper">
    <!-- <img id="myImg" ng-src="http://placehold.it/200x400" />  -->
    <!-- Should work with such extreme case as well -->
    <img id="myImg" ng-src="http://placehold.it/1000x200" />
  </div>
</div>