想用圖像填充縮略圖容器，使用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標籤，它應該工作正常