Question

我有一个标题，段落和单个图片的页面，其大小/宽高比可能会有很大差异。

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

这是我的基本配置：

＆＃13;

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

＆＃13;

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

＆＃13;

我查看了很多SO帖子，网站，博客等。我无法弄清楚从哪里开始完成这项工作。关于流体图像或响应图像的大多数文章仅涉及可滚动网页。因此，即使是关于该主题的良好参考也会有所帮助。谢谢。

编辑：更新了剪片以使用flex layout。如您所见，图像超出了蓝色div界限。我使用过object-fit="content";或object-fit="fill";，但似乎没有人限制图像以尊重div界限

Answer 1

我会使用像“background-size：cover”这样的css属性。这是一个例子。前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风格或任何最适合您的样式中定义它。

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

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

1 个答案: