0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Dimitar
  • 11
  • 3

1 Answers1

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

Jack Wang
  • 462
  • 7
  • 17
  • Thanks Jack it work good but i have little problem because picture is in
    and i resize "div" not picture
     – Dimitar Jun 03 '16 at 08:20
  • 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 http://stackoverflow.com/questions/19100009/dragging-and-resizing-an-image-on-html5-canvas – Jack Wang Jun 03 '16 at 08:43