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

Posted 2023-03-06

【中文标题】使图像填充剩余的垂直空间，不滚动

【英文标题】：make image fill remaining vertical space, no scroll

【发布时间】：2016-03-26 17:37:42

【问题描述】：

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

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

这是我的基本配置：

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 边界

【问题讨论】：

这是一个获取图像尺寸的jquery技巧，在获取尺寸后，您可以比较两者中较大的宽度和高度，然后设置适当的图像属性（即宽度或高度） - @987654322 @

【参考方案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>

【讨论】：

感谢您的回答，很有帮助。但是，我正在寻找一个更通用的解决方案，而不是必须手动计算高度。你知道object-fit是否只在包含div只有绝对大小时才有效？

我已经更新了我的 sn-p 以使用垂直 flex 布局，问题是图像，尽管使用了 object-fit，但不尊重 div-bounds。任何线索为什么？

@Overdrivr 很抱歉重播晚了。我对flex 不熟悉，但您必须将object-fit 提供给图像，并且其容器必须具有高度。

【参考方案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/cs-s-ref/css3_pr_background-size.asp