Question

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

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

例如，我想尝试只剪头，然后伸展头

Answer 1

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

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&amp;d=identicon&amp;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);
   }

Answer 2

在没有第二个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 个答案: