Jquery - 如何裁剪图像并缩放与原始图像相同的尺寸

Question

我想通过给出（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裁剪图像的想法只是隐藏图像的其他部分，如果我将其调整为原始图像。另一部分再次出现。我想知道这样做的好方法是什么？

Answer 1

CSS IMG填充容器宽度/高度。识别IMG长宽比。

编辑：我不得不放弃使用图像方向的想法。宽高比更有意义。

这可能有用 - 图片来自维基媒体。一个是垂直的，第二个是水平的。它们居中并适合宽度/高度。 我必须将$(document).ready()更改为$(window).on("load") - 因为文档准备好只等待HTML DOM完全加载，但如果图像尚未下载，则会错误地识别img维度，因此它的宽高比（编辑）。

• 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>

Answer 2

https://stackoverflow.com/users/1034869/edmundo建议的更清洁的解决方案 - https://stackoverflow.com/a/42714818/7581087

它更清洁，更容易。另一方面，它不使用<img /> - 这可能很麻烦。

body{padding:0;margin:0;}
.crop {
  display:inline-block;
  width: 180px;
  height: 120px;
  background-position:center center;
  background-size:cover;
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="crop" title="1st Image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg)">
</span>
<span class="crop" title="2nd Image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>
<span class="crop" title="3rd Image" style="height:80px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>
<span class="crop" title="4th Image" style="width:50px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>