我的目标是通过调整图像的高度来将图像大小限制为height:160px; width:270px;。如果可能，我想让用户裁剪图像并上传到服务器。
here是示例的链接。
我的代码示例 - ＆gt;
<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>
答案 0 :(得分：0)
我找到了陈丰源github resource。它被许可为MIT。如您所愿，它提供了裁剪图像的所有解决方案。它也有很好的记录。如果您希望更改是永久性的，您可以使用getCroppedCanvas([options])获取裁剪的图像数据，并将其发送到服务器端语言（如php）以保存为图像。这是一个链接，你可以检查上传画布数据到PHP： Uploading 'canvas' image data to the server
如果没有php等服务器端语言的帮助，所有更改都将是暂时的。