在 HTML 中裁剪图像的最佳方法是什么?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/519774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:12:16  来源:igfitidea点击:

What is the best way to crop an image in HTML?

htmlcss

提问by fmsf

What is the best way to crop an image in HTML?

在 HTML 中裁剪图像的最佳方法是什么?

It would be something like the following:

这将类似于以下内容:

<img src="something.gif" x1="10" y1="10" x2="20" y2="20">

If that doesn't work, then I'll just use GIMP. Any thoughts on how I can get this to work programmatically?

如果这不起作用,那么我将只使用 GIMP。关于如何以编程方式使其工作的任何想法?

回答by Georg Sch?lly

That's called sprites, you can read this fantastic article of A List Apart.

这就是所谓的精灵,您可以阅读A List Apart 的这篇精彩文章。

In the end it boils down to:

最后归结为:

#panel2b {
    width:50px;
    height:30px;
    background: transparent url(test-3.jpg) -96px -200px no-repeat;
}

回答by Simon_Weaver

You can also use a tool like this web based CSS Sprite Generatorto create a larger image if you have many slices.

如果你有很多切片,你也可以使用像这个基于 web 的 CSS Sprite Generator 这样的工具来创建更大的图像。

[Someone on my similar questionled me to yours].

[有人在我的类似问题上引导我到你的]。