如何在固定尺寸的框内按高度调整图像，并在上传后保持图像尺寸

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>

</div>

Answer 1

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.