How to adjust image by height inside a box of fixed dimensions, and maintain image dimensions after upload

Question

My objective is to limit image size to height:160px; width:270px; by resizing image by its height. If it's possible, I want to let user crop image and upload to server. here is the link of example.

example of my code->

<div class="col-sm-12">
  <div class="hotel-list">
    <div class="row image-box hotel listing-style1">
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery image-container">
              <img width="270" height="160" alt="" src="../Done/images/sideWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/white1028.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/white1028.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/backWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/sideWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/sideGray.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
               <small style="padding-left:1%;">avg/night</small>
               $620
              </span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

you have to use server side code to resize image and then upload. — Parth Trivedi, Jan 18 '16 at 04:53
@ParthTrivedi is that backend job? or i need to fixed by css and javascript? — ChengWan, Jan 18 '16 at 04:58

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

I have found a github resource by Fengyuan Chen. It is licensed as MIT. As you wanted, it provides all solution for cropping the image. It is well documented as well. If you want the changes to be permanent, you can get cropped image data by using getCroppedCanvas([options]) and send it to server side languages like php for saving as image. Here is a link you can check for uploading canvas data to php: Uploading 'canvas' image data to the server

Without the help of server side languages like php, all the changes will be temporary.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 18 '16 at 05:40

Kiran Shakya

2,521
2
24
37

may i ask php can mixed up with kendoui? because my backed team member said it cant be mixed. just want to confirm. – ChengWan Jan 18 '16 at 05:58
kendoui is just a client framework which works with javascript. It doesn't have any relation with php. However and whatever client framework you use you can always post data to php with good old `jQuery.ajax()` – Kiran Shakya Jan 18 '16 at 06:24
thank a lot.. do you have any idea about this website? http://icodingclub.blogspot.in/2014/10/introduction-html5-canvas-image-cropper.html i wonder why i take the code down create new html but it didn't show the croped image. – ChengWan Jan 18 '16 at 06:32
Link you provided has same type of cropping mechanism as the resource I referenced in above answer. Both use HTML5 canvas to crop image and both can produce cropped data as image, but link you have mentioned recently is displaying the cropped image in an img tag instead. If you want cropped image to be available in server, you must use php or any server language which support image file creation. – Kiran Shakya Jan 18 '16 at 06:40
okay, thank for teaching. appreciated a lot. do you have facebook, whatsapp or line? wondering if i can learn more? – ChengWan Jan 18 '16 at 06:58
Sure, you can send friend request to me at my facebook profile.https://www.facebook.com/mesagunshakya – Kiran Shakya Jan 18 '16 at 06:59

How to adjust image by height inside a box of fixed dimensions, and maintain image dimensions after upload

1 Answers1