代码之家 › 专栏 › 技术社区 › Andrea Girardi

如何将图像剪切到网页中

css javascript php

Andrea Girardi · 技术社区 · 16 年前

我想在我的网页上显示图像的一部分。假设原始格式为1024x768,则显示的图像必须为100x768。这不是重新调整大小,而是从0.0像素开始的简单剪切。有什么建议吗?

6 回复 | 直到 16 年前

Sampson 16 年前

使用CSS的Clip属性:

img { position:absolute; clip:rect(0px 60px 200px 0px) }

<div style="overflow:hidden; width:100px; height:76px;">
  <img src="myImage.jpg" />
</div>

Chris Van Opstal 16 年前

您可以使用 CSS clip

img {
    position:absolute;
    clip:rect(0px,100px,768px,0px);
}

usoban 16 年前

裁剪图像或使用现有库,WideImage是此类操作的最佳选择之一。

Stephen Sorensen 16 年前

使用图像编辑器在将图像上传到服务器之前裁剪图像。除非出于某种原因,你需要加载整个图像但将其切断。。。

Alex 16 年前

另一种解决方案是将图像作为背景图像插入。

<div style="width: 768px; height: 100px; background: url(theimage.jpg) no-repeat left top;"></div>

Hugh Bothwell 16 年前

根据使用情况,我建议使用动态裁剪脚本或缓存预裁剪的图像。

<?php

// get parameters
$fname = (string) $_GET['f'];
$top = (int) $_GET['h'];

// load original
$old = imagecreatefromjpeg($fname);
list($width, $height) = getimagesize($fname);
   // N.B. this reloads the whole image! Any way to get
   // width/height directly from $old resource handle??

// create new canvas
$new = imagecreatetruecolor($width, $top);

// copy portion of image
imagecopy($dest, $src, 0, 0, 0, 0, $width, $top);

// Output and free from memory
header('Content-Type: image/jpeg');
imagejpg($new);

?>

<img src="crop.php?f=myimg.jpg&h=100" />