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

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) 来完成。

你做了什么？

我用 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>

图像的高度较低

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>

Answer 2

我会使用 CSS 属性，例如“background-size:cover”。这是一个例子。前 2 个容器对具有不同纵横比的 2 个容器使用“覆盖”方法，而不会改变图像比例。第三个使用“像素尺寸”。请记住，如果您更改 x 或 y 轴尺寸，则仅对其中一个进行更改，并将另一个定义为 auto，以免更改图像比例（就像悬停效果在第三个容器上所做的那样）。

小提琴： https://jsfiddle.net/coolcatDev/0111sfmg/2/

HTML：

<div class="container1">
</div>
<br>
<div class="container2">
</div>
<br>
<div class="container3">
</div>

CSS：

.container1 {
    background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    height:300px;
    width:300px;
    border:2px solid green;
}
.container2 {
    background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    height:600px;
    width:200px;
    border:2px solid green;
}
.container3 {
    background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:200px;
    width:300px;
    border:2px solid green;
}

.container3:hover {

    background-size: 450px auto;

}

您可以在样式表、内联、自定义指令内部、ng-style 或任何最适合您的方式中定义它。

浏览器支持： http://www.w3schools.com/cssref/css3_pr_background-size.asp