CODEWITHSUNDEEP
htmlcssangularjsimagetwitter-bootstrap
DevRight
DevRight

Reputation: 395

Want to fill thumbnail container with image, using ng-repeat Angularjs

I am using Angular to loop over a html element and display an Image. But the image is not filling the thumbnail container. I have set the max height and width to max-height: 100%; max-width: 100%;

But the image is still displayed at a fraction of the thumbnail container.

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>

Upvotes: 0

Views: 3719

Answers (3)

Souhail Ben Slimene
Souhail Ben Slimene

Reputation: 667

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.courses=[{name:"test1",picture: "https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?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>

Add class="img-responsive" to your img tag and it should work fine

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

Remove the padding from the .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

Upvotes: 1

broodjetom
broodjetom

Reputation: 286

What I have done in the past is use a div with display: inline-block, and give this a background-url of your img. Then set the background-size to cover. Just like this: 

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

In angular, because you have variable img source, html would maybe look like this:

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

Upvotes: 1

Related Questions