0

I want to put uploaded images in such a way that if the image size is smaller than container div, it keeps its original size, but if the image size is larger than container div then it fits in the div and I have to provide width and height to the image else jquery.resizable will not work. Is there any possible way ?

xaero
  • 99
  • 1
  • 1
  • 10
  • 1
    Check [this](http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container) – Mohan Oct 11 '12 at 09:56
  • make sure u keep the aspect ratio. – Berker Yüceer Oct 11 '12 at 10:07
  • for example you might want to take a look at powerpoint add image functionality, I want to create exactly same in HTML. Hope this clarifies my question – xaero Oct 11 '12 at 10:10
  • Found exactly what I was looking for here : [Solution][1] [1]: http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – xaero Oct 12 '12 at 02:30

1 Answers1

1

You can use max-height and max-width.

.imgClass{

 max-height: container-height;
 max-width: container-width;
}
Anoop
  • 23,044
  • 10
  • 62
  • 76
  • I get the basic idea, but I don't think it would work in my case my structure is something like
    so if I make max-width and max-height as 100% then it keeps the aspect ratio while resizing, which I don't want. Resize should be fluid     – xaero Oct 11 '12 at 10:05
  • do you want to cover entire parent ? if so you have t use jQuery/JavaScript and you image may look distorted as aspect ratio will not be maintained. – Anoop Oct 11 '12 at 10:08
  • for example you might want to take a look at powerpoint add image functionality, I want to create exactly same in HTML. Hope this clarifies my question – xaero Oct 11 '12 at 10:10
  • max-height and max-width will get applied only if image width or height exceed the container height otherwise it will appear as it original sape. sorry right now I don't have powerpoint on my system. – Anoop Oct 11 '12 at 10:18