Question

我正在使用Angular循环遍历html元素并显示一个Image。但是图像没有填充缩略图容器。我已将最大高度和宽度设置为 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

我过去所做的是使用带有display: inline-block的div，并给它一个你的img的背景网址。然后将background-size设置为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 2

从.thumbnail ..

中删除填充

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

#>> operator

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标签添加class =“img-responsive”，它应该可以正常工作

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

3 个答案: