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 `分の高さでそれを試してみてください

.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

は、私が過去に行ったことはdisplay: inline-blockでのdivを使用し、これをあなたのIMGの背景URLを与えることです。その後、背景サイズを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タグに反応します。それはうまくいくはずです。