CODEWITHSUNDEEP
htmlcssangularjs
Serhiy
Serhiy

Reputation: 1981

how to make images same size?

I try to render in mages in Angular, using ng-repeat But every image has it's own size(some round , some oval), despite that I've set size in DOM element.

<div ng-repeat="member in vm.members" class="memberList" layout="column" layout-align="start center">
     {{member.username}}
     <img class="md-avatar" style="border-radius: 50%; border: 1px solid black" height="60" width="60" src={{member.user_picture}}>
</div>

how to make all rendered images same height and width?

Upvotes: 0

Views: 2445

Answers (3)

Manush Venkatesh
Manush Venkatesh

Reputation: 118

Try This.. :)

<div ng-repeat="member in vm.members" class="memberList" layout="column" layout-align="start center">
      {{member.username}}
      <img class="md-avatar" style="border-radius: 50%; border: 1px solid black;width:60px;height:60px"  src={{member.user_picture}}>
</div>

Upvotes: 2

Bala Abhinav
Bala Abhinav

Reputation: 1348

Add it to your style of the img tag : 

<img class="md-avatar" style="border-radius: 50%; border: 1px solid black;height:60px!important;width:60px!important;" ng-src="member.user_picture" />

Upvotes: 3

nashcheez
nashcheez

Reputation: 5183

Put the height & width properties inside the style attribute.

<div ng-repeat="member in vm.members" class="memberList" layout="column"
     layout-align="start center"> {{member.username}}
     <img class="md-avatar" style="border-radius: 50%; border: 1px solid black; height: 60px; width: 60px;"  src={{member.user_picture}}>
</div>

Upvotes: 0

Related Questions