使图像填充剩余的垂直空间,无滚动

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布局.如您所见,图像超出了蓝色div界限.我曾经使用过object-fit="content";或者object-fit="fill";似乎没有人限制图像来尊重div界限

Answer 1

它可以通过object-fit（它不支持IE）和CSS calc（它支持大多数浏览器）来完成。

你做了什么？

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

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

然后通过保持图像的比例来object-fit拟合图像的高度。.wrapper

图片由高处拍摄

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

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>

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;
}