CODEWITHSUNDEEP
javascriptangularjs
Jackson Baby
Jackson Baby

Reputation: 418

how to resize the image in angularjs?

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
    </div>
</div>

I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?

I have some algorithm to resize it independently

Upvotes: 1

Views: 20637

Answers (4)

eyurdakul
eyurdakul

Reputation: 912

you can get/set the height and width properties with angular.element("selector").height or width.

Upvotes: 0

Kineolyan
Kineolyan

Reputation: 743

as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
    </div>
</div>

If using only height or width, the other attribute is calculated to respect the image proportions.

Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.

Cheers

Upvotes: 1

Nathan Hensher
Nathan Hensher

Reputation: 336

I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily: 

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';

Upvotes: 1

aaa
aaa

Reputation: 601

If your goal is to resize proportionally, why not resize using CSS percentages?

CSS:

.smaller {
  width: 80%;
}

Your Code:

<div class="row" data-ng-repeat="row in imageDataUrls" >
    <div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
        <img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
    </div>
</div>

Upvotes: 0

Related Questions