裁剪图像，然后拉伸以填充可用空间

Posted 2023-02-25

【中文标题】裁剪图像，然后拉伸以填充可用空间

【英文标题】：Crop image and then stretch to fill available space

【发布时间】：2012-04-26 15:04:58

【问题描述】：

我正在尝试从 url 裁剪图像，然后将裁剪的图像拉伸到可用空间。

<div style="width:300px; height:400px;">
  <img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&amp;d=identicon&amp;r=PG" />
</div>

这将适当地拉伸图像，但我不知道如何裁剪它。我尝试使用clip:rect(0px,60px,200px,0px);，但图像会先拉伸到可用空间，然后再应用剪辑，所以它对我不起作用。

编辑 - jsfiddle：http://jsfiddle.net/bjMp6/

例如，我想尝试剪掉头部然后拉伸头部

【问题讨论】：

你能用它做一个小提琴吗？

@SvenBieder - 小提琴是什么意思？

jsfiddle.net是分享和测试html/js/css代码的便捷方式

我看到的解决方案是获取图像，然后使用 drawImage 将其绘制在画布中

为什么需要 3 行代码的 jsfiddle？我认为这里完全没有必要。

【参考方案1】：

在没有第二个 div 的情况下实现 Yoshi 的想法

div

    width:300px; 
    height:400px;
    border:1px solid #333;
    overflow:hidden;
    position:relative;

img

    width:300%; 
    height:300%;
    position:absolute;
    top:0;
    left:-50%;

添加边框只是为了查看包含的 div。这样您就不需要知道容器的暗淡，但是要裁剪图像，您必须使用任何解决方案来处理数字，除非所有图像都具有相同的相对组成，即头像或类似的东西。

这是一个fiddle，供您观赏。

此外，随着容器的增长/缩小，您的图像将保持相同的裁剪和位置。

【参考方案2】：

我做了一个小提琴来说明画布解决方案：

http://jsfiddle.net/dystroy/mDy24/

这是html：

   <div id=theimg style="width:300px; height:400px;">
          <canvas id=thecanvas style="width:100%;height:100%;">
   </div>​

还有js：

   var img = new Image();
   img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG";
   img.onload = function() 
          var can = document.getElementById('thecanvas');
          var con = can.getContext("2d");
          console.log(con);
          con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
   ​

【讨论】：

感谢您的回答，我确实喜欢这种方法，将来可能会使用它，但我会坚持使用纯 css 解决方案

只要你的转换在css中是可行的，你应该使用css，我同意。我发布这个主要是为了说明这种更强大的可能性，因为我知道太多人忽略了画布的效率。