How to make my picture resizable using angularjs

Question

Hello everyone i have a lot of problems to make my picture resizable (when i put my pointer on the edges of the picture) using Angular js can anyone please help me how can i make script functional?. Here is my Html ...

<div class="container">

  <div class="row">
    <div class="col-sm-8 ">


     <img class="img-responsive " src="assets/images/coca-cola.jpg" alt="" />


      </div>
    </div>
  </div>

i like to resize my picture when i move my mouse cursor on some edge of the picture. tnx — Dimitar
– Dimitar, Commented Jun 3, 2016 at 7:27

Jack Wang · Accepted Answer · 2016-06-03 08:04:14Z

1

Simplest way is using CSS resize property.

<div style="overflow:auto;resize:both;">
    <img style="width:100%;height:auto;" class="img-responsive " src="assets/images/coca-cola.jpg" alt="" />
</div>

Then you can use ng-mouseover to trigger that style or class using ng-style or ng-class

answered Jun 3, 2016 at 8:04

Jack Wang

4727 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dimitar Over a year ago

Thanks Jack it work good but i have little problem because picture is in <div> and i resize "div" not picture

Jack Wang Over a year ago

The image size is set to 100% width of its parent. Whe you change the wrapper div's size, image changes correspondingly. If you want to literally resize image, I suggest using canvas, please see stackoverflow.com/questions/19100009/…

Collectives™ on Stack Overflow

How to make my picture resizable using angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related