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

Question

我正在使用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> 

Answer 1

Re从.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

Answer 2

我过去做的是使用一个div display: inline-block，这给你的IMG的一个背景网址。然后将背景大小设置为cover。就像这样：

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

在角度，因为你有可变IMG源，HTML会也许是这样的：

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

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

添加类=“img-响应“您的img标签，它应该工作正常