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

hmtdttj4 于 2023-06-28 发布在 Java

关注(0)|答案(3)|浏览(137)

我有一个标题，段落和单个图像的页面，可以有非常不同的大小/宽高比。
我想图像，以适应，使它要么填补最大可用高度，或由其宽度限制，而不松散的纵横比，既不造成滚动。
这是我的基本配置：

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>

我看了很多这样的帖子，网站，博客等。我不知道该从哪里开始做这件事。大多数关于流体图像或响应式图像的文章只谈论可滚动的网页。因此，即使是一个很好的参考主题将是有帮助的。谢谢你。
编辑：更新了剪切以使用flex layout。如您所见，图像超出了蓝色div边界。我已经使用了object-fit="content";或object-fit="fill";，但似乎没有一个约束图像尊重div边界

JavaScript

来源：https://stackoverflow.com/questions/34382246/make-image-fill-remaining-vertical-space-no-scroll

3条答案

按热度按时间

mzsu5hc01#

它可以通过object-fit（它不支持IE）和css calc（它支持大多数浏览器）来完成。
你做了什么？
我用一个div（.wrapper） Package 图像，用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>

赞(0）回复(0）举报 2023-06-28

bkhjykvo2#

我会使用css属性，比如“background-size：cover”。这里有一个例子。前2个容器在具有不同纵横比的2个容器上使用“覆盖”方法，而不改变图像比率。第三个使用“像素尺寸”。请记住，如果你改变x或y轴尺寸，只在其中一个上这样做，并将另一个定义为自动，以便不改变图像比例（如悬停效果在第三个容器上）。
小提琴：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

赞(0）回复(0）举报 2023-06-28

3zwjbxry3#

已经有一段时间了，但是如果其他人遇到同样的问题，问题是父容器需要是一个Flex容器，以便为其子容器给予边界：

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;display: flex" 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>

赞(0）回复(0）举报 2023-06-28

我来回答

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

3条答案

相关问题

热门标签

最新问答