我想通过给出（xAxis，yAxis，Height，Width）从原始图像中裁剪图像。
所有裁剪后的图像应与下面的框一样大
[
2
并将裁剪后的部分设置为固定大小，这样无论用户给出的高度和宽度如何，我都可以在网络上有序地显示这些裁剪后的图像。
我尝试使用 jrac，但是它要求我在使用标签显示之前保存裁剪后的图像。我还尝试使用纯 css 来完成此操作。
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
然而，CSS 裁剪图像的想法只是隐藏图像的其他部分，如果我将其大小调整为原始图像。另一部分再次出现。我想知道这样做的好方法是什么？
编辑：我不得不放弃使用图像方向的想法。纵横比更有意义。
这可行 - 图片来自维基媒体。一是垂直的，二是水平的。它们居中并适合宽度/高度。
我必须改变$(document).ready() to $(window).on("load")- 因为文档就绪只等待 HTML DOM 完全加载，但如果尚未下载图像，它会错误地识别 img 尺寸及其长宽比（EDIT) .
jQuery 仅用于确定图像长宽比
CSS 将图像置于容器元素内并调整其大小 根据与容器相比的长宽比。
裁剪只需通过容器即可完成overflow:hidden
$(window).on("load",function() {//wait for images to be loaded
$(".crop img").each(function() {//loop through images to be cropped
if (($(this).width()/$(this).height()) < ($(this).parent().width()/$(this).parent().height()))//compare Aspect ratio
$(this).addClass("taller");
});
});body{padding:0;margin:0;}
.crop {
position: relative;
display:inline-block;
width: 200px;
height: 150px;
overflow: hidden;
/*hide "crop" overflowing parts of images*/
border:1px solid #000;
}
.crop img {
position: relative;
box-sizing: border-box;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*center the overflowing element*/
width: auto;
height: 100%;
/*Fit to height, overflow horizontally*/
border:2px dashed red;
/*highlight img borders for demonstration*/
}
.crop img.taller{
width: 100%;
height: auto;
/*Fit to width, overflow vertically*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg">
</span>
<span class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>
<span class="crop" style="height:80px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>