想用图像填充缩略图容器，使用 ng-repeat Angularjs答案

【问题标题】：Want to fill thumbnail container with image, using ng-repeat Angularjs想用图像填充缩略图容器，使用 ng-repeat Angularjs
【发布时间】：2017-03-09 02:34:54
【问题描述】：

我正在使用 Angular 循环一个 html 元素并显示一个图像。但是图像没有填充缩略图容器。我已将最大高度和宽度设置为 max-height: 100%; max-width: 100%;

但图像仍显示在缩略图容器的一小部分。

CSS

.row .col-md-12 .thumbnail{ 
   display: inline-block;
   width: 350px;
   height: 275px;
   padding: 10%;
   position:relative;
}
img {
    max-height: 100%;
    max-width: 100%;
}

HTML

<ul class="col-md-12"  >
                <li class="thumbnail" ng-repeat="course in courses" >
                    <a ui-sref="course({id:course.id})">
                        <img  ng-src="{{course.picture}}" alt="" />
                    </a>
                </li>  
        </ul>

【问题讨论】：

试试min-height: 100%;
@sachila ranawaka 我试过了，但没有用。谢谢
从.thumbnail 中删除 10% 的填充。此外，如果图像尺寸不是 350 x 275；填充.thumbnail 容器时会出现问题。
一切正常，图像现在已满容器。图像的大小超过 350 x 275。大多数是 600 X 400。

标签： html css angularjs image twitter-bootstrap

【解决方案1】：

从.thumbnail..中删除填充。

.row .col-md-12 .thumbnail{ 
   display: inline-block;
   width: 350px;
   position:relative;
}
img {
    max-height: 100%;
    max-width: 100%;
}

http://www.codeply.com/go/z4mKyQAIfN

【讨论】：

【解决方案2】：

我过去所做的是使用带有display: inline-block 的div，并给它一个你的img 的背景URL。然后将背景大小设置为cover。就像这样：

.yourdiv {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: url('yoururl.com');
    background-size: cover;
}

在 Angular 中，因为你有可变的 img 源，html 可能看起来像这样：

<div class="yourdiv" style="background: url('{{course.picture}}')" ng-repeat"course in courses">

【讨论】：

【解决方案3】：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.courses=[{name:"test1",picture: "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"},{name:"test2",picture: "http://hammerjs.github.io/assets/img/stackoverflow-icon.svg"}];
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">


<ul class="col-md-6" ng-app="myApp" ng-controller="myCtrl">
  <li class="thumbnail" ng-repeat="course in courses" >
      <a>
          <img  ng-src="{{course.picture}}" alt="" />
      </a>
  </li>  
</ul>

</div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

将 class="img-responsive" 添加到您的 img 标签，它应该可以正常工作

【讨论】：